[JavaScript] URL에서 쿼리 문자열 추출 방법(URLSearchParams)

• URL에서 쿼리 문자열 추출 방법

// 현재 페이지의 URL에서 쿼리 문자열 추출
const queryString = window.location.search;
console.log(queryString); // ?item=yoyo

// URLSearchParams 객체 생성
const searchParams = new URLSearchParams(queryString);

// 특정 키(key)에 해당하는 값 가져오기
const item = searchParams.get("item");
console.log("item: ", item); // 값이 없으면 null

 

• URLSearchParams methods 예제 코드

// URLSearchParams 객체 생성
// const searchParams = new URLSearchParams(); // O
const searchParams = new URLSearchParams("value1=100&value2=200&value3=300&value4=400&value5=500"); // ?(쿼리 스트링) 생략 가능
console.log(searchParams); // URLSearchParams 객체

// 키, 값 쌍으로 searchParams에 추가
searchParams.append("value6", "600");

// key 또는 key와 value값과 일치하는 매개변수를 삭제(value는 선택)
searchParams.delete("value2");
searchParams.delete("value3", "100000"); // key는 일치하지만 value가 일치하지 않아 삭제 X
searchParams.delete("value4", "400");

// 객체에 포함된 모든 키, 값 쌍을 반환
for (const [key, value] of searchParams.entries()) {
  console.log(`${key} : ${value}`); // 'name : yoyo', 'addr : soul'
}

// 콜백 함수를 통해 객체에 포함된 모든 값을 반복
searchParams.forEach((value, key) => console.log(`${key} : ${value}`)); // X
searchParams.forEach((value, key) => { // O, 중괄호가 없으면 출력이 안됨
  console.log(`${key} : ${value}`);
});

// key에 해당하는 value 가져오기(연관된 첫 번째 값을 반환)
console.log(searchParams.get("user")); // null
console.log(searchParams.get("value1")); // 100

// 연관된 모든 값을 배열로 반환(값이 없으면 빈 문자열 반환)
searchParams.append("value6", "651"); // 테스트를 위해 추가
console.log(searchParams.getAll("value6")); // ['600', '651']
console.log(searchParams.getAll("value10")); // []

// 키 또는 키와 값과 일치하는 값이 있는지 확인(boolean 값 반환)
console.log(searchParams.has("value2")); // false
console.log(searchParams.has("value3", 300)); // true
console.log(searchParams.has("value4", 456)); // false

// 객체에 포함된 모든 키를 반환
for (const key of searchParams.keys()) {
  console.log(key); // 'value1', 'value3', 'value5', 'value6', 'value6'
}

// 객체에 포함된 모든 값을 반환
for (const value of searchParams.values()) {
  console.log(value);
}

// key와 value를 추가(없으면 생성, 일치하는 값이 여러 개인 경우 나머지 값을 삭제)
searchParams.set("value8", 800); // 'value1', 'value3', 'value5', 'value6', 'value6', 'value8'
searchParams.set("value6", 666); // 'value1', 'value3', 'value5', 'value6', 'value6', 'value8' -> value6 : 666

// 객체에 포함된 모든 키, 값 쌍을 정렬하고 반환
// ex) c=4&a=2&b=3&a=1 -> a=2&a=1&b=3&c=4
searchParams.sort();

// 쿼리 문자열을 반환(값이 없으면 빈 문자열 반환)
console.log(searchParams.toString()); // 'value1=100&value3=300&value5=500&value6=666&value8=800'

// 객체에 포함된 키, 값 쌍의 개수를 반환
console.log(searchParams.size); // 5