URLSearchParams 인터페이스는 URL 쿼리 문자열을 처리하는 몇 가지 실용적인 방법을 정의합니다.
구현 된 URLSearchParams 객체는 for...of 구조 에서 직접 사용할 수 있습니다 . 예를 들어 다음 두 줄은 동일합니다.
for (const [key, value] of mySearchParams) {}
for (const [key, value] of mySearchParams.entries()) {}참고 : 이 기능 은 Web Worker 에서 사용할 수 있습니다.
건설자
URLSearchParams 객체를 반환 합니다.
방법
인터페이스는 속성을 상속하지 않습니다.
지정된 키 / 값 쌍을 새 검색 매개 변수로 삽입합니다.
검색 매개 변수 목록에서 지정된 검색 매개 변수와 해당 값을 삭제하십시오.
iterator모든 키 / 값 쌍을 순회 할 수 있는 객체 를 반환합니다 .
지정된 검색 매개 변수의 첫 번째 값을 가져옵니다.
지정된 검색 매개 변수의 모든 값을 가져오고 반환 값은 배열입니다.
Boolean 이 검색 매개 변수가 있는지 여부를 반환 합니다.
반환 iterator 이 객체는 키 / 값 쌍의 모든 키 이름을 포함합니다.
검색 매개 변수의 새 값을 설정합니다. 값이 여러 개인 경우 다른 값은 모두 삭제됩니다.
키 이름으로 정렬합니다.
URL에서 직접 사용할 수있는 검색 매개 변수로 구성된 문자열을 반환합니다.
반환 iterator 이 객체에는 키 / 값 쌍의 모든 값이 포함됩니다.
예
var paramsString = "q=URLUtils.searchParams&topic=api"
var searchParams = new URLSearchParams(paramsString);
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