关于javascript:使用-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'];

应用 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。
我用它初始化深层链接的状态。

举荐浏览

• 箭头函数与惯例函数的 5 个不同
• 工夫切片（Time Slicing）