URLSearchParams
API は URL の各部分に対して一貫したインターフェースを提供し、クエリ文字列(?
の後のもの)を簡単に操作できるようにします。
従来、デベロッパーは正規表現と文字列分割を使用して、URL からクエリ パラメータを抽出していました。私たちが自分に正直であれば、面白くありません。この作業は面倒で間違いが起こりがちです。私の暗い秘密の 1 つは、Google サンタを追いかけようや Google I/O 2015 ウェブなど、複数の大規模な Google.com アプリで同じ get|set|removeURLParameter
ヘルパー メソッドを再利用していることです。
それでは、適切な API を使って、この処理を行いましょう。
URLSearchParams API
Chrome 49 では、URL 仕様の URLSearchParams
が実装されています。この API は、URL クエリ パラメータを扱う場合に役立ちます。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);
append: 既存のパラメータに別の値を追加します。
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 マルチパートではなく URL エンコードされたデータを POST する代替メカニズムを提供します。
const params = new URLSearchParams();
params.append('api_key', '1234567890');
fetch('https://example.com/api', {
method: 'POST',
body: params
}).then(...)
URLSearchParams
は Chrome にはまだ実装されていませんが、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';
機能検出とブラウザ サポート
現在、URLSearchParams
をサポートしているのは、Chrome 49、Firefox 44、Opera 36 です。
if ('URLSearchParams' in window) {
// Browser supports URLSearchParams
}
ポリフィルについては、github.com/WebReflection/url-search-params のものをおすすめします。
デモ
サンプルを試す
URLSearchParams
を実際のアプリで確認するには、Polymer のマテリアル デザインの Iconset Generator をご覧ください。これを使用して、ディープリンクからのアプリの初期状態をセットアップしました。とても便利です。