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+string&version=1&person=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('version', 2);

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

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

매개변수를 삭제합니다.

params.delete('person');

URL 작업

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

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

params.has('baz') === true
params.toString() === 'foo=1&bar=2&baz=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 multipart가 아닌 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 아이콘 세트 생성기를 확인하세요. 이를 사용하여 딥 링크에서 앱의 초기 상태를 설정했습니다. 꽤 유용합니다 :)