URLSearchParams
URLSearchParams는 URL의 쿼리 문자열을 대상으로 작업할 수 있는 유틸리티 메서드를 정의한다. URLSearchParams를 구현하는 객체는 for ... of반복문으로 직접 키/값을 순회가 가능하다. 키/값 쌍의 순회 순서는 쿼리 문자열에 나타나는 순서와 같다.
for (const [key, value] of mySearchParams) {
}
for (const [key, value] of mySearchParams.entries()) {
}메서드
URLSearchParams.append()
주어진 키/값 쌍을 새로운 검색 매개변수로 추가합니다.
URLSearchParams.delete()
주어진 검색 매개변수와 그 값을 모두 삭제합니다.
URLSearchParams.entries()
객체의 모든 키/값 쌍을 쿼리 문자열과 같은 순서로 순회할 수 있는 순회기를 반환합니다.
URLSearchParams.forEach()
객체의 모든 값을 순회하면서 지정한 콜백을 호출합니다.
URLSearchParams.get()
주어진 검색 매개변수에 연결된 첫 번째 값을 반환합니다.
URLSearchParams.getAll()
주어진 검색 매개변수에 연결된 모든 값을 반환합니다.
URLSearchParams.has()
주어진 검색 매개변수의 존재 여부를 나타내는 불리언 값을을 반환합니다.
URLSearchParams.keys()
객체의 모든 키/값 쌍에서 키만 순회할 수 있는 순회기를 반환합니다.
URLSearchParams.set()
주어진 검색 매개변수에 값을 설정합니다. 이미 해당 매개변수에 연결된 값이 있으면 우선 모두 제거합니다.
URLSearchParams.sort()
모든 키/값 쌍을 키의 순서로 정렬합니다.
URLSearchParams.toString()
URL에 쓰기 적합한 형태의 쿼리 문자열을 반환합니다.
URLSearchParams.values()
객체의 모든 키/값 쌍에서 값만 순회할 수 있는 순회기를 반환합니다.
예시
const paramsString = "q=URLUtils.searchParams&topic=api";
let 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"요 메서드를 사용해서 URL의 쿼리에 접근을 할 수 있다. 얘네를 쓰게된 이유는 html파일에서 a태그를 사용하여 다른 html로 넘어갈때 영화의 id값을 쿼리로 주고 상세 페이지에서 해당 영화의 데이터와 추천 영화들을 가져와야 했기 때문에 그 id값을 다시 가져왔어야했다. 그렇게 알아보던 중에 알게 된 것이 URLSearchParms이다. 현재의 URL을 window.location.search를 통해 쿼리를 가져와서 .get(key)로 id를 가져올 수 있게 되었다.
