URLSearchParams

URLSearchParams 인터페이스는 URL의 쿼리 문자열에 대해 작업할 수 있는 유틸리티 메서드를 정의합니다.

URLSearchParams를 구현하는 객체는 for...of 반복문에 바로 사용할 수 있습니다.

for (const [key, value] of mySearchParams) {}
for (const [key, value] of mySearchParams.entries()) {}
주의: 이 기능은 Web Worker에서 사용할 수 있습니다.

생성자

URLSearchParams()
 URLSearchParams 객체 인스턴스를 반환합니다.

메서드

URLSearchParams.append()
특정 키/값을 새로운 검색 매개변수로 추가합니다.
URLSearchParams.delete()
특정 매개변수를 찾아 키와 값 모두 지웁니다.
URLSearchParams.entries()
객체의 모든 키/값 쌍을 순회할 수 있는 순회기를 반환합니다.
URLSearchParams.forEach()
객체의 모든 값을 순회하며 지정한 콜백을 호출합니다.
URLSearchParams.get()
주어진 검색 매개변수에 연결된 첫 번째 값을 반환합니다.
URLSearchParams.getAll()
주어진 검색 매개변수에 연결된 모든 값을 반환합니다.
URLSearchParams.has()
주어진 검색 매개변수의 존재 여부를 나타내는 Boolean을 반환합니다.
URLSearchParams.keys()
객체의 모든 키를 순회할 수 있는 순회기를 반환합니다.
URLSearchParams.set()
주어진 검색 매개변수에 연결된 값을 설정합니다. 연결된 값이 다수라면 나머지는 제거합니다.
URLSearchParams.sort()
모든 키/값 쌍을 키로 정렬합니다.
URLSearchParams.toString()
URL에 쓰기 적합한 형태의 쿼리 문자열을 반환합니다.
URLSearchParams.values()
객체의 모든 값을 순회할 수 있는 순회기를 반환합니다.

예제

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"

주의점

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 10.3Samsung Internet Android Full support 5.0
URLSearchParams() constructorChrome Full support 49Edge Full support 17Firefox Full support 29IE No support NoOpera Full support 36Safari Full support 10.1WebView Android Full support 49Chrome Android Full support 49Firefox Android Full support 29Opera Android Full support 36Safari iOS Full support 10.3Samsung Internet Android Full support 5.0
appendChrome Full support 49Edge Full support 17Firefox Full support 29IE No support NoOpera Full support 36Safari Full support 10.1WebView Android Full support 49Chrome Android Full support 49Firefox Android Full support 29Opera Android Full support 36Safari iOS Full support 10.3Samsung Internet Android Full support 5.0
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 5.0
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 5.0
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 5.0
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 5.0
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 5.0
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 5.0
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 5.0
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 5.0
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 8.0
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 5.0
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 5.0

Legend

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

같이 보기