使用 URLSearchParams 轻松操作 URL

英文原文:https://developers.google.com/web/updates/2016/01/urlsearchparams

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

在以前,开发人员使用正则表达式和字符串分割来获取 URL 的查询参数。如果我们一直诚实地这样做,那就没什么意思。 那会很无趣而且常常伴随着错误。我的一个黑魔法是,我在多个大型 Google.com 应用中重用相同的 get|set|removeURLParameter 帮助方法,其中包含 Google Santa TrackerGoogle 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/30/2019, 12:24:26 PM