使用 URLSearchParams 轻松操作 URL

本文首发个人网站，永久地址：https://tie.pub/blog/easy-url-manipulation-with-urlsearchparams/，欢迎订阅。

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）