使用 URLSearchParams 輕鬆操控網址

URLSearchParams API 提供一致的介面，可用於處理網址的各個部分，並允許簡單操作查詢字串 (? 後面的內容)。

傳統上，開發人員會使用規則運算式和字串分割，從網址中提取查詢參數。如果我們完全誠實面對，實在是很無趣。 要正確處理這可能既繁瑣又容易出錯。我其中一個黑暗秘密，就是在多個大型 Google.com 應用程式中重複使用相同的 get|set|removeURLParameter 輔助方法，包括 Google 聖誕老人追蹤器和 2015 年 Google I/O 大會網頁。

我們需要一個適當的 API 來執行這項工作！

URLSearchParams API

體驗功能

Chrome 49 會實作 網址規格中的 URLSearchParams，這個 API 可用於處理網址查詢參數。我認為 URLSearchParams 與網址一樣方便，而 FormData 則是表單的方便性。

那麼該如何運用這些資訊？只要提供網址字串，您就能輕鬆擷取參數值：

// 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']

delete：

params.delete('person');

使用網址

您大多會使用完整網址或修改應用程式的網址。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'

如要實際變更網址，您可以擷取參數、更新參數值，然後使用 history.replaceState 更新網址。

// 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 範本字串，根據應用程式現有的網址路徑和修改過的參數，重新建構更新後的網址。

與其他地點網址整合

根據預設，在 fetch() API 要求中傳送 FormData 會建立多部分主體。如有需要，URLSearchParams 會提供替代機制，以便將網址編碼的 POST 資料傳送，而非 mime 多部分。

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
}

對於 polyfill，我建議您使用 github.com/WebReflection/url-search-params 中的 polyfill。

示範

試試範例吧！

如要查看實際應用程式中的 URLSearchParams，請參閱 Polymer 的 Material Design Iconset Generator。我透過這項功能設定應用程式的深層連結的初始狀態。非常方便 :)