Javascript - URLSearchParams로 쿼리 문자열 출력

URLSearchParams는 URL의 쿼리 문자열을 다룰 때 주로 사용하며 보통 window.location.search와 같이 사용한다. window.location.search는 현재 브라우저의 쿼리 문자열을 출력한다.

console.log(window.location.search)

// 예상 출력) ?id=123&fruit=mango

현재 주소가 localhost?id=123&fruit=mango 라면 ? 뒤에 붙은 쿼리 문자열만 출력한다. 이를 URLSearchParams와 함께 사용하여 특정 키를 가져오도록 할 수 있다.

const params = new URLSeacrhParams(window.location.search)
console.log( params.get('id') ) // 123
console.log( params.get('fruit') ) // mango

쿼리 문자열은 key, value 형식으로 지정되는데 get()에 특정 key를 입력하면 해당 key의 value을 반환한다.