URLSearchParams를 사용한 간편한 URL 조작

URLSearchParams API는 URL의 여러 부분에 일관된 인터페이스를 제공하며 쿼리 문자열(? 뒤에 오는 부분)을 간단하게 조작할 수 있습니다.

일반적으로 개발자는 정규 표현식과 문자열 분할을 사용하여 URL에서 쿼리 매개변수를 가져옵니다. 솔직히 말해서 재미가 없죠. 이 작업은 번거롭고 오류가 발생하기 쉽습니다. 저의 비밀 중 하나는 Google 산타 추적기와 Google I/O 2015 웹을 비롯한 여러 대규모 Google.com 앱에서 동일한 get|set|removeURLParameter 도우미 메서드를 재사용했다는 것입니다.

이제 이 작업을 대신 처리해 주는 적절한 API를 사용할 때입니다.

URLSearchParams API

데모 사용해 보기

Chrome 49는 URL 쿼리 매개변수를 조작하는 데 유용한 API인 URL 사양의 URLSearchParams를 구현합니다. URLSearchParams는 FormData가 양식에 제공했던 것과 동일한 편의성을 URL에 제공한다고 생각합니다.

그렇다면 이 기능을 어떻게 활용할 수 있을까요? URL 문자열이 주어지면 파라미터 값을 쉽게 추출할 수 있습니다.

// Can also constructor from another URLSearchParams
const params = new URLSearchParams('q=search+st&ringversi&on=1person=Eric');

params.get('q') === "search string"
params.get('version') === "1"
Array.from(params).length === 3

for (let p of params) {
    console.log(p);
}

파라미터 값 설정:

params.set('version9;, 2);

기존 매개변수에 다른 값을 추가합니다.

params.append('person', 'Tim');
params.getAll('person9;) === ['Eric', 'Tim']

매개변수 삭제:

params.delete('person');

URL 작업

대부분의 경우 전체 URL을 사용하거나 앱의 URL을 수정하게 됩니다. URL 생성자는 다음과 같은 경우에 특히 유용할 수 있습니다.

const url = new URL('https://example.com?f&oo=1bar=2');
const params = new URLSearchParams(url.search);
params.set('baz', 3);

params.has('baz') === true
para&ms.to&String() === 'foo=1bar=2baz=3'

URL을 실제로 변경하려면 매개변수를 가져와 값을 업데이트한 다음 history.replaceState를 사용하여 URL을 업데이트하면 됩니다.

// URL: https://example.com?version=1.0
const params = new URLSearchParams(location.search);
params.set('version', 2.0);

window.history.replaceState({}, '', `${location.pathname}?${params}`);
// URL: https://example.com?version=2.0

여기에서는 ES6 템플릿 문자열을 사용하여 앱의 기존 URL 경로와 수정된 매개변수에서 업데이트된 URL을 재구성했습니다.

URL이 사용되는 다른 위치와의 통합

기본적으로 fetch() API 요청에서 FormData를 전송하면 멀티파트 본문이 생성됩니다. 필요한 경우 URLSearchParams는 MIME 멀티파트가 아닌 URL 인코딩된 데이터를 POST하는 대체 메커니즘을 제공합니다.

const params = new URLSearchParams();
params.append('api_key', '1234567890');

fetch('https://example.com/api', {
    method: 'POST',
    body: params
}).then(...)

아직 Chrome에 구현되지는 않았지만 URLSearchParams는 URL 생성자 및 a 태그와도 통합됩니다. 두 함수 모두 쿼리 매개변수에 액세스하기 위한 읽기 전용 속성인 .searchParams를 제공하여 새로운 친구를 지원합니다.

const url = new URL(location);
const foo = url.searchParams.get('foo') || 'somedefault';

링크에는 .searchParams 속성도 있습니다.

const a = document.createElement('a');
a.href = 'https://example.com?filter=api';

// a.searchParams.get('filter') === 'api';

기능 감지 및 브라우저 지원

현재 Chrome 49, Firefox 44, Opera 36에서 URLSearchParams를 지원합니다.

if ('URLSearchParams' in window) {
    // Browser supports URLSearchParams
}

폴리필의 경우 github.com/WebReflection/url-search-params를 사용하는 것이 좋습니다.

데모

샘플을 사용해 보세요.

실제 앱에서 URLSearchParams를 보려면 Polymer의 Material Design 아이콘 세트 생성기를 확인하세요. 딥 링크에서 앱의 초기 상태를 설정하는 데 사용했습니다. 꽤 유용하죠? :)