URLSearchParams 란? 그리고 사용법

개요

• URLSearchParams 로 URL 뒤에 복잡하게 붙은 파라미터를 쉽게 쪼갤 수 있다.
  • ex. www.example.com?foo=1&bar=2 에서 {foo: 1, bar: 2} 와 같이 뒤에 붙은 파라미터를 쉽게 가져올 수 있다.
• URLSearchParams 는 URL 의 쿼리 스트링과 관련된 작업을 하는 유틸리티 메서드를 정의하는 인터페이스이다.

주된 사용법: 생성자

• URLSearchParams 는 주로 new 키워드를 이용한 생성자를 통해 초기화하고 사용한다.

const params = new URLSearchParams("foo=1&bar=2");
console.log(params.get("foo")); // 1
console.log(params.get("bar")); // 2

생성자의 인자로 올 수 있는 것

생성자의 파라미터로는 다음 중 하나가 올 수 있다.

• application/x-www-form-urlencoded 형식으로부터 파싱된 문자열. 단, 맨 앞의 '?' 문자는 무시된다.
  • ex) ?q=URLSearchParams
  • ex) 현재 페이지의 쿼리 스트링은 window.location.search 로 불러올 수 있다.
    • 참조 링크
• key-value 문자열 쌍의 나열 혹은 FormData 오브젝트와 같이 iterator 를 가져 문자열 쌍의 시퀀스를 만들어내는 오브젝트가 올 수도 있다. File 엔트리는 파일 이름으로 오지 않고 application/x-www-form-urlencoded 폼에서 처럼 [object File] 로 직렬화된다.
• 문자열 키 밸류의 record 가 올 수 있다. 단, 중첩은 지원하지 않는다.

반환 값

URLSearchParams 오브젝트 가 결과로 나온다.

예제

• 일반적인 예제에서는 URL 을 통으로 가져와 JS 내장 URL 객체로 만든다.
• URL 객체에서 .search 프로퍼티만 빼서 new URLSearchParams() 생성자의 인자로 넣어주면, 쉽게 활용이 가능하다.

다양한 용례

// URL 을 통으로 가져옴
var url = new URL("https://example.com?foo=1&bar=2");
// search 부분(?foo=1&bar=2) 만 생성자에 넣기
var params = new URLSearchParams(url.search);

// 직접 파라미터 부분 쪼개서 넣기
var params2 = new URLSearchParams("foo=1&bar=2");
var params2a = new URLSearchParams("?foo=1&bar=2");

// 엔트리 형태로 넣기
var params3 = new URLSearchParams([
  ["foo", "1"],
  ["bar", "2"],
]);

// 레코드 형태로 넣기
var params4 = new URLSearchParams({ foo: "1", bar: "2" });

실전 예제

• window.location.search 에 아래와 같은 값이 들어있을 때,
  • '?startCount=0&collection=ALL&range=A&searchField=ALL&sort=RANK&query=%EB%B0%A9%ED%83%84&srchOption=*&includeAr=false'

// window.location.search = '?startCount=0&collection=ALL&range=A&searchField=ALL&sort=RANK&query=%EB%B0%A9%ED%83%84&srchOption=*&includeAr=false'

for (const param of new URLSearchParams(window.location.search)) {
  console.log(param);
}

위의 코드를 수행하면, 아래와 같은 결과가 나올 것이다.

['startCount', '0']
['collection', 'ALL']
['range', 'A']
['searchField', 'ALL']
['sort', 'RANK']
['query', '방탄']
['srchOption', '*']
['includeAr', 'false']