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());
주의: 이 기능은 Web Worker에서 사용할 수 있습니다.

생성자

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
The definition of 'URLSearchParams' in that specification.
Living Standard Initial definition.

브라우저 호환성

Update compatibility data on GitHub
DesktopMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewChrome for AndroidFirefox for AndroidOpera for AndroidSafari on iOSSamsung Internet
URLSearchParamsChrome Full support 49Edge Full support 17Firefox Full support 29
Notes
Full support 29
Notes
Notes Prior to version 57 single quotes in URLs were escaped (see bug 1386683).
IE No support NoOpera Full support 36Safari Full support 10.1WebView Android Full support 49Chrome Android Full support 49Firefox Android Full support 29
Notes
Full support 29
Notes
Notes Prior to version 57 single quotes in URLs were escaped (see bug 1386683).
Opera Android Full support 36Safari iOS Full support YesSamsung Internet Android Full support Yes
URLSearchParams() constructorChrome Full support 49Edge Full support 17Firefox Full support 29IE No support NoOpera Full support 36Safari Full support YesWebView Android Full support 49Chrome Android Full support 49Firefox Android Full support 29Opera Android Full support 36Safari iOS Full support YesSamsung Internet Android Full support Yes
appendChrome Full support 49Edge Full support 17Firefox Full support 29IE No support NoOpera Full support 36Safari Full support YesWebView Android Full support 49Chrome Android Full support 49Firefox Android Full support 29Opera Android Full support 36Safari iOS Full support YesSamsung Internet Android Full support Yes
deleteChrome Full support 49Edge Full support 17Firefox Full support 29IE No support NoOpera Full support 36Safari Partial support Partial
Notes
Partial support Partial
Notes
Notes Removing a non-existent query parameter doesn't remove ? from the URL. See bug 193022.
WebView Android Full support 49Chrome Android Full support 49Firefox Android Full support 29Opera Android Full support 36Safari iOS Partial support Partial
Notes
Partial support Partial
Notes
Notes Removing a non-existent query parameter doesn't remove ? from the URL. See bug 193022.
Samsung Internet Android Full support Yes
entriesChrome Full support 49Edge Full support 17Firefox Full support 44IE No support NoOpera Full support 36Safari Full support YesWebView Android Full support 49Chrome Android Full support 49Firefox Android Full support 44Opera Android Full support 36Safari iOS Full support YesSamsung Internet Android Full support Yes
forEachChrome Full support 49Edge Full support 17Firefox Full support 44IE No support NoOpera Full support 36Safari Full support YesWebView Android Full support 49Chrome Android Full support 49Firefox Android Full support 44Opera Android Full support 36Safari iOS Full support YesSamsung Internet Android Full support Yes
getChrome Full support 49Edge Full support 17Firefox Full support 29IE No support NoOpera Full support 36Safari Full support YesWebView Android Full support 49Chrome Android Full support 49Firefox Android Full support 29Opera Android Full support 36Safari iOS Full support YesSamsung Internet Android Full support Yes
getAllChrome Full support 49Edge Full support 17Firefox Full support 29IE No support NoOpera Full support 36Safari Full support YesWebView Android Full support 49Chrome Android Full support 49Firefox Android Full support 29Opera Android Full support 36Safari iOS Full support YesSamsung Internet Android Full support Yes
hasChrome Full support 49Edge Full support 17Firefox Full support 29IE No support NoOpera Full support 36Safari Full support YesWebView Android Full support 49Chrome Android Full support 49Firefox Android Full support 29Opera Android Full support 36Safari iOS Full support YesSamsung Internet Android Full support Yes
keysChrome Full support 49Edge Full support 17Firefox Full support 44IE No support NoOpera Full support 36Safari Full support YesWebView Android Full support 49Chrome Android Full support 49Firefox Android Full support 44Opera Android Full support 36Safari iOS Full support YesSamsung Internet Android Full support Yes
setChrome Full support 49Edge Full support 17Firefox Full support 29IE No support NoOpera Full support 36Safari Full support YesWebView Android Full support 49Chrome Android Full support 49Firefox Android Full support 29Opera Android Full support 36Safari iOS Full support YesSamsung Internet Android Full support Yes
sortChrome Full support 61Edge Full support 17Firefox Full support 54IE No support NoOpera Full support 48Safari Full support YesWebView Android Full support 61Chrome Android Full support 61Firefox Android Full support 54Opera Android Full support 45Safari iOS Full support YesSamsung Internet Android Full support Yes
toStringChrome Full support 49Edge Full support 17Firefox Full support 29IE No support NoOpera Full support 36Safari Full support YesWebView Android Full support 49Chrome Android Full support 49Firefox Android Full support 29Opera Android Full support 36Safari iOS Full support YesSamsung Internet Android Full support Yes
valuesChrome Full support 49Edge Full support 17Firefox Full support 44IE No support NoOpera Full support 36Safari Full support YesWebView Android Full support 49Chrome Android Full support 49Firefox Android Full support 44Opera Android Full support 36Safari iOS Full support YesSamsung Internet Android Full support Yes

Legend

Full support  
Full support
Partial support  
Partial support
No support  
No support
See implementation notes.
See implementation notes.

같이 보기