使用 URLSearchParams 轻松操作 URL
URLSearchParams API 提供一致性接口和 URL 片段，并用于查询字符串的操作(即地址"?"之后的部分)。
在以前，开发人员使用正则表达式和字符串分割来获取 URL 的查询参数。如果我们一直诚实地这样做，那就没什么意思。
那会很无趣而且常常伴随着错误。我的一个黑魔法是，我在多个大型 Google.com 应用中重用相同的 get|set|removeURLParameter 帮助方法，其中包含 Google Santa Tracker 和 Google I/O 2015 web
现在有一个更好的 API 来做这些！
URLSearchParams API
Chrome 49 中的 URLSearchParams 是通过 URL 规范 来实现，用来处理 URL 查询参数的 API。
我认为 URLSearchParams 对于 URls 就如同 FormData 对于 forms。
如此你会使用它吗？给你一个 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;如果一个参数有多个值，
get方法只会返回第一个值。迭代参数：
for (let p of params) {
console.log(p);
}使用 set 设置一个新参数值：
params.set('version', 2);如果一个参数有多个值，这样会删除具有相同参数名的所有其他参数。
使用 append 为已存在的参数添加新值：
params.append('person', 'Tim');
params.getAll('person') === ['Eric', 'Tim'];使用 delete 删除一个参数：
params.delete('person');
params.getAll('person') === [];在这个例子中，将删除 URL 所有以
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 使用
默认情况下，在 fetch() API 请求体中使用 FormData。如果你需要，URLSearchParams 提供一个 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
}为了在不支持的浏览器中使用它，推荐使用 https://github.com/ungap/url-search-params。
演示
尝试示例！
想要查看 URLSearchParams 在真实应用中的使用，请查看 Polymer's material design Iconset Generator。我用它初始化深层链接的状态。
本文作者 Eric Bidelman，转载请注明来源链接：
原文链接：https://developers.google.com/web/updates/2016/01/urlsearchparams
本文链接：https://tie.pub/2019/05/easy-url-manipulation-with-urlsearchparams/
