使用 网址SearchParams 轻松操控网址

URLSearchParams API 提供一致的 与网址各个片段的接口，进行简单的操作 查询字符串（在 ? 之后的内容）。

传统上，开发者使用正则表达式和字符串拆分来提取查询 参数。如果我们真诚地坦白自己，那也没什么好玩的。 这项功能可能既繁琐又容易出错。我的一个黑暗秘密就是，我重复使用了 get|set|removeURLParameter 辅助方法。

是时候使用合适的 API 来为我们做这些事情了！

网址SearchParams 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);
}

set 一个参数值：

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(...)

虽然 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';

功能检测和浏览器支持

目前，Chrome 49、Firefox 44 和 Opera 36 支持 URLSearchParams。

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

对于 polyfill，我建议使用 github.com/WebReflection/url-search-params 中的相应库。

演示

试用示例！

如需在实际应用中查看 URLSearchParams，请参阅 Polymer 的 Material Design Iconset 生成器。我用它来设置应用的来自深层链接的初始状态。非常方便 :)