使用 网址SearchParams 轻松操控网址

URLSearchParams API 为网址的各个部分提供了一致的接口，并允许对查询字符串（? 之后的内容）进行简单操作。

传统上，开发者使用正则表达式和字符串拆分来从网址中提取查询参数。坦白说，这可不好玩。 要正确完成这些操作，可能会非常繁琐且容易出错。我的一个不为人知的秘密是，我在多个大型 Google.com 应用中重复使用了相同的 get|set|removeURLParameter 辅助方法，包括 Google 追踪圣诞老人和 Google I/O 2015 网站。

是时候使用一个合适的 API 来为我们完成这些工作了！

URLSearchParams API

试用演示版

Chrome 49 实现了 URL 规范中的 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']

删除参数：

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 图标集生成器。我用它来通过深层链接设置应用的初始状态。非常方便 :)