JavaScript Get URL 매개 변수

1. URL개체의searchParams를 사용하여GET매개 변수에서 값 가져 오기
2. location.search를 사용하여GET매개 변수에서 값 가져 오기

이 자습서에서는 GET 매개 변수에서 값을 가져 오는 방법을 설명합니다.

URL개체의searchParams를 사용하여GET매개 변수에서 값 가져 오기

URL 객체는 매개 변수로 정의 된 URL을 나타냅니다. searchParams속성을 사용하여GET에서 디코딩 된 매개 변수에 액세스 할 수있는URLSearchParams객체를 반환 할 수 있습니다. 그런 다음URLSearchParams객체에 첨부 된get함수를 사용하여 URL 내의 매개 변수 값을 가져올 수 있습니다.

var input_string =
    'http://www.google.com/app.html?apple=1&banana=3&cherry=m2';  // window.location.href
var url = new URL(input_string);
var cherry = url.searchParams.get('cherry');
console.log(cherry);

위의 코드에서 먼저URLSearchParams개체를 가져온 다음get함수를 사용하여 디코딩 된 매개 변수 값을 가져옵니다.

location.search를 사용하여GET매개 변수에서 값 가져 오기

location의search속성은 기본적으로query string이라고도하는 검색 문자열입니다. 매개 변수 값을 얻기 위해 문자열을 분할 한 다음 매개 변수와 해당 값을 사전에 저장합니다. 그런 다음 사전을 사용하여 모든 키 및 값 쌍을 쉽게 가져올 수 있습니다.

var GET_parameters = {};

if (location.search) {
  var splitts = location.search.substring(1).split('&');
  for (var i = 0; i < splitts.length; i++) {
    var key_value_pair = splitts[i].split('=');
    if (!key_value_pair[0]) continue;
    GET_parameters[key_value_pair[0]] = key_value_pair[1] || true;
  }
}

var abc = GET_parameters.abc;

논의 된 모든 방법은 모든 주요 브라우저에서 지원됩니다.