[JavaScript] URLSearchParams을 이용하여 파라미터를 보기 좋게 만들 때 사용

URLSearchParams를 사용하여 객체로 파라미터를 만들어보려고 한다. 

URLSearchParams 인터페이스는 URL의 쿼리 문자열에 대해 작업할 수 있는 유틸리티 메서드를 정의한다.

 

URLSearchParams 생성 예제

- 반환값은 : URLSearchParams 객체 인스턴스

// 객체 생성 방법 - 매개변수 : init
var URLSearchParams = new URLSearchParams(init);


// url 생성자에 전달된 주소를 url.search를 통해 params라는 변수로 검색합니다.
var url = new URL('https://example.com?foo=1&bar=2');
var params = new URLSearchParams(url.search);

// 문자열 리터럴을 전달합니다.
var params2 = new URLSearchParams("foo=1&bar=2");
var params2a = new URLSearchParams("?foo=1&bar=2");

// 일련의 쌍으로 전달합니다.
var params3 = new URLSearchParams([["foo", "1"], ["bar", "2"]]);

// 레코드로 전달합니다.
var params4 = new URLSearchParams({"foo": "1", "bar": "2"});

 

객체를 URLSearchParams로 HTTP Get 메서드의 파라미터를 추가해보려고 한다.

먼저, HTTP GET 메서드로 파라미터를 넘길 때 아래와 같이 코드를 작성한다.

let url = '/test/page?name=value1&age=value2';

 

만약, 파라미터가 추가되면 코드를 보기 어려워지고 파라미터가 많은 상황에서 수정 및 삭제를 하게 될 경우 해당 파라미터를 찾기 힘들어지는 상황이 발생할 수 있다. 

 

이 경우를 대비하여 보기 쉬운 코드인 객체로 바꾸려고 한다.

// value1 = 'kimmy', value2 = 25
let data = {
    name: value1,
    age: value2
};

let searchParams = new URLSearchParams(data);

// 출력결과: name=kimmy&age=25
let params = searchParams.toString();

// 출력결과: /test/page?name=kimmy&age=25
let url = `/test/page?${params}`;

 

참고

• URLSearchParams - Web API | MDN
• URLSearchParams() - Web API | MDN