URLSearchParams

URLSearchParams 인터페이스는 URL의 Query 문자열을 다루는 메소드의 정의 입니다.

URLSearchParams 오브젝트는 for...of 구조에 바로 사용할수 있으며, entries() 대신 for (var p of mySearchParams)으로 사용이 가능합니다. 이는 for (var p of mySearchParams.entries())과 동등합니다.

for (var p of mySearchParams);
for (var p of mySearchParams.entries());

생성자

URLSearchParams()

이 생성자는  URLSearchParams 오브젝트를 반환합니다.

메서드

URLSearchParams.append()

특정 키/값을 새로운 검색 매개변수로 추가합니다.

URLSearchParams.delete()

특정한 매개변수를 찾아 이를 지웁니다. 키와 값 모두를 지우게 됩니다.

URLSearchParams.entries()

그 오브젝트에 포함된 모든 키와 값을 접근하게 해주는  iterator 을 반환합니다.

URLSearchParams.get()

검색한 매개변수의 첫번째 값을 반환합니다.

URLSearchParams.getAll()

검색한 매개변수의 모든 값을 반환합니다.

URLSearchParams.has()

검색한 매개변수의 존재 여부를 Boolean 형태로 반환합니다.

URLSearchParams.keys()

오브젝트에 포함된 모든 키에 접근하게 해주는 iterator 을 반환합니다.

URLSearchParams.set()

검색된 매개 변수의 값을 주어진 값으로 설정합니다. 이미 여럿의 값들이 존재했을 경우 나머지 값을 지웁니다.

URLSearchParams.sort()

키/값에 따라 모든 매개변수를 정렬합니다. 같을경우 키에 따라 정렬합니다. 

URLSearchParams.toString()

Query 문자열을 포함한 문자열을 반환합니다. 이는 URL에 쓰기 적합합니다.

URLSearchParams.values()

오브젝트에 포함된 모든 값에 접근하게 해주는  iterator 을 반환합니다.

예제

var paramsString = "q=URLUtils.searchParams&topic=api";
var searchParams = new URLSearchParams(paramsString);

//Iterate the search parameters.
for (let p of searchParams) {
  console.log(p);
}

searchParams.has("topic") === true; // true
searchParams.get("topic") === "api"; // true
searchParams.getAll("topic"); // ["api"]
searchParams.get("foo") === null; // true
searchParams.append("topic", "webdev");
searchParams.toString(); // "q=URLUtils.searchParams&topic=api&topic=webdev"
searchParams.set("topic", "More webdev");
searchParams.toString(); // "q=URLUtils.searchParams&topic=More+webdev"
searchParams.delete("topic");
searchParams.toString(); // "q=URLUtils.searchParams"

Gotchas

URLSearchParams 생성자는 전체 URL을 파싱하지 않습니다. 그러나, 문자열의 첫번째에 물음표(?)가 있으면 이를 제거합니다.

var paramsString1 = "http://example.com/search?query=%40";
var searchParams1 = new URLSearchParams(paramsString1);

searchParams1.has("query"); // false 
searchParams1.has("http://example.com/search?query"); // true

searchParams1.get("query"); // null
searchParams1.get("http://example.com/search?query"); // "@" (equivalent to decodeURIComponent('%40'))

var paramsString2 = "?query=value";
var searchParams2 = new URLSearchParams(paramsString2);
searchParams2.has("query"); // true 

var url = new URL("http://example.com/search?query=%40");
var searchParams3 = new URLSearchParams(url.search);
searchParams3.has("query") // true

명세

브라우저 호환성

같이 보기

• URL 인터페이스.
• Google Developers: Easy URL manipulation with URLSearchParams