URLSearchParams|URLSearchParams 处理查询字符串 URLSearchParams处理查询字符串

本文首发于个人网站，永久地址： 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 } // 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()
【URLSearchParams|URLSearchParams 处理查询字符串】返回一个可以遍历所有值的 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，为不支持的浏览器添加对应功能