URLSearchParams으로 URL 쿼리스트링 다루기

쿼리스트링

쿼리스트링은 데이터를 전달하기 위한 하나의 방법으로, 쿼리스트링은 URL에 포함하여 전달하게 됩니다. 쿼리스트링과 URL 주소를 구분하기 위해서 ? 를 사용합니다. 데이터는 key=value 로 구성하며, 여러 값을 전달할 때는 &로 구분합니다.

http://0.0.0.0:8080/index?key1=value1&key1=value1

URLSearchParams

URLSearchParams 는 쿼리스트링을 손쉽게 사용할 수 있도록 해주는 생성자입니다. 인스턴스 생성 시 초기 쿼리스트링 값을 넘겨줄 수 있습니다.

new URLSearchParams(?init)

URLSearchParams는 다양한 메서드를 제공하고 있습니다. 자주 사용했던 메서드들만 소개하도록 하겠습니다.

1. append(name, value)
   새로운 파라미터를 추가해주는 메서드입니다.
2. delete(name)
   인스턴스에 추가되어 있는 파라미터 중 name에 해당하는 파라미터를 제거합니다. 존재하지 않는 name을 입력해도 에러는 발생하지 않습니다.
3. forEach(callback)
   인스턴스에 등록되어 있는 파라미터의 수만큼 반복해서 callback 함수를 호출합니다. callback 함수의 첫번째 파라미터는 파라미터의 value를 넘겨줍니다.
4. get(name)
   인스턴스에 등록되어 있는 파라미터의 name을 입력하면 해당하는 value를 반환합니다.
5. has(name)
   name을 입력했을 때 인스턴스에 등록되어 있는 파라미터가 존재하는 경우 true, 아니라면 false를 반환합니다.
6. toString()
   파라미터를 쿼리스트링 형태로 반환해줍니다.

예제

사용해보기

const urlSearch = new URLSearchParams();
urlSearch.append('name', 'Kim');

if (urlSearch.has('name')) {
	console.log(urlSearch.get('name')); // Kim
}

console.log(urlSearch.toString()); // name=Kim

urlSearch.delete(name);

console.log(urlSearch.toString());

init으로 객체 넘기기

URLSearchParams 생성자를 통해 인스턴스 생성시 객체를 넘겨줄 수 있습니다. 객체를 쿼리스트링 형태로 변환할 때 사용하면 편리하게 작성할 수 있습니다.

const data = {
	name: 'Kim',
    age: 24
};
const urlSearch = new URLSearchParams(data);

console.log(urlSearch.toString()); // name=Kim&age=24

URL에서 파라미터 값 추출

globalThis.location.search 을 통해서 URL의 쿼리스트링 부분만 추출가능합니다. 해당 값을 파라미터로 넘겨줘서 객체를 생성할 수 있습니다. 그 후 get 메서드를 통해 쉽게 값을 추출할 수 있습니다.

const url = globalThis.location.search;
const urlSearch = new URLSearchParams(url);

urlSearch.get('key');

URL 자체를 인스턴스 생성시 넘겨주면 원하는 결과가 나오지 않습니다. globalThis.location.search를 통해서만 가능합니다.