使用|使用 URLSearchParams 轻松操作 URL 使用URLSearchParams轻松操作URL

本文首发个人网站，永久地址： https://tie.pub/2019/05/easy-...，欢迎订阅。

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

【使用|使用 URLSearchParams 轻松操作 URL】使用 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。
我用它初始化深层链接的状态。
推荐阅读