本文首发于集体网站，永恒地址：https://tie.pub/2019/05/urlse...，欢送订阅。

URLSearchParams api 定义了用于解决 url 查问的办法，能够用于更新你的 query parameters 办法，而不是应用 qs，query-string 等库。

构造方法(constructor)

构造方法接管一个字符串作为参数，new URLSearchParams(init) 返回 URLSearchParams 对象实例，该对象实例的许多办法能够应用 for...of 遍历：

const searchParams = new URLSearchParams(location.search);//上面两行代码同义for (let params of searchParams) {}for (let params of searchParams.entries()) {}

对象办法

URLSearchParams.append(name, value)

向查问参数对象中增加键/值

const searchParams = new URLSearchParams();searchParams.append('q', 'append');

须要留神的是增加数组作为值(value)的时候，会被解决为逗号分隔的字符串

const searchParams = new URLSearchParams();searchParams.append('arr', ['a', 'b']);searchParams.get('arr'); // 'a,b'

URLSearchParams.delete(name)

删除查问参数中指定的参数和对应的值

URLSearchParams.entries()

返回一个能够遍历所有键/值的 iterator 对象

const searchParams = new URLSearchParams('q=v');for (let [key, value] of searchParams.entries()) {  console.log(key, value); // q v}// orconsole.log([...searchParams.entries()]); // [["q", "v"]]

URLSearchParams.get(name)

返回对应 name 的第一个值

const searchParams = new URLSearchParams('q=v&q=a');searchParams.get('q'); // v

URLSearchParams.getAll(name)

返回一个数组，蕴含对应 name 的所有值

const searchParams = new URLSearchParams('q=v&q=a');searchParams.getAll('q'); // ["v", "a"]

URLSearchParams.has(name)

用于判断是否含有某一查问参数

URLSearchParams.keys()

返回一个能够遍历所有键名的 iterator 对象

const searchParams = new URLSearchParams('q=v');for (let key of searchParams.keys()) {  console.log(key); // q}// orconsole.log([...searchParams.keys()]); // ["q"]

URLSearchParams.values()

返回一个能够遍历所有值的 iterator 对象

URLSearchParams.sort()

const searchParams = new URLSearchParams('q=v&bar=bar&charset=utf8');searchParams.sort();searchParams.toString(); // bar=bar&charset=utf8&q=v

对查问按键名排序

URLSearchParams.toString()

返回 URLSearchParams 对象组成的字符串，罕用于 URL search 上

const searchParams = new URLSearchParams('q=v');searchParams.append('bar', 'bar');searchParams.append('charset', 'utf8');searchParams.toString(); // q=v&bar=bar&charset=utf8

浏览器兼容性

URLSearchParams 反对大部分古代浏览器，IE，Edge Mobile 浏览器不反对。如果你的用户群体仍然是这些，可行的解决办法是应用 polyfill 填充

URLSearchParams polyfill

应用 @ungap/url-search-params 应用 URLSearchParams api，为不反对的浏览器增加对应性能

import URLSearchParams from '@ungap/url-search-params';new URLSearchParams('q=v').get('q'); // v

相干参考

  • MDN Docs: URLSearchParams

举荐浏览

  • 应用 URLSearchParams 轻松操作 URL
  • 应用 async-await 实现一个反复期待事务函数