2021 年 10 月 30 日

URLSearchParams 处理查询字符串

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
}
// or
console.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
}
// or
console.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