使用 URLSearchParams 轻松操作 URL

URLSearchParams API 提供一致性接口和 URL 片段,并用于查询字符串的操作(即地址"?"之后的部分)。

在以前,开发人员使用正则表达式和字符串分割来获取 URL 的查询参数。如果我们一直诚实地这样做,那就没什么意思。 那会很无趣而且常常伴随着错误。我的一个黑魔法是,我在多个大型 Google.com 应用中重用相同的 get|set|removeURLParameter 帮助方法 (opens new window),其中包含 Google Santa Tracker (opens new window)Google I/O 2015 web (opens new window)

现在有一个更好的 API 来做这些!

URLSearchParams API

尝试演示 (opens new window)

Chrome 49 中的 URLSearchParams 是通过 URL 规范 (opens new window) 来实现,用来处理 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 (opens new window) 构造方法可以方便地使用:

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 的模版字符串 (opens new window)重新更新应用的 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 (opens new window)

演示

尝试示例 (opens new window)

想要查看 URLSearchParams 在真实应用中的使用,请查看 Polymer's material design Iconset Generator (opens new window)。 我用它初始化深层链接的状态 (opens new window)