前言
对前端开发者来说针对url的处理和管理还是比较常见的，但是自己处理起来的话，可能考虑不够全，出现各种问题。 例如：
- www.baidu.com?a=1&b=2&a=3 参数重复出现
- www.baidu.com?a=1&b=2 参数的值可能存在空
- www.baidu.com?a=1&b=2&a=20% 参数可能会encode
下面看下URLSearchParams的使用，可以避免这些问题。
使用
let searchParams = new URLSearchParams('?a=1&b=2');
console.log(searchParams);
可以看到生成了一个URLSearchParams类型的对象，原型上是一些操作函数，下面是这些函数的使用和示例：
let testUrl = '?a=1&b=2'
let searchParams = new URLSearchParams(testUrl);
// has 查询url中是否存在某个key
searchParams.has('a'); // true
// append 插入一个指定的键值对，作为新的参数
searchParams.append('c', '3')
// delete 删除某一对key/value
searchParams.delete('b');
searchParams.has('b'); // false
// get 返回查找的key的第一个值，没有此key则返回null
searchParams.get('a'); // ''
// getAll 返回查找的key的所有值，以数组的形式返回， 没有此key则返回[]
searchParams.append('a', '5');
searchParams.getAll('a'); // ['1', '5']
// set 设置和搜索参数相关联的值。如果设置前已经存在匹配的值，会删除多余的，如果将要设置的值不存在，则创建它
searchParams.set('a', '9')
searchParams.getAll('a'); // ['9']
// sort 对包含在此对象中的所有键值对进行排序，返回undefined，排序顺序是根据键的 Unicode 代码点，使用稳定的排序算法 (即，将保留具有相等键的键/值对之间的相对顺序)
// toString 返回搜索参数组成的字符串
searchParams.sort();
searchParams.toString(); // "a=9&c=3&c=3"
// keys 返回一个iterator对象，此对象包含了键/值对的所有键名, 可以用for of 循环这个对象
for (const key of searchParams.keys()) {
console.log(key); // 循环打印 'a' 'c' 'c'
}
// values 和 entries 方法 同 keys 方法，都返回一个iterator对象， values会包含了键/值对的所有值， entries会包含了键/值对
注意点
- URLSearchParams 构造函数不会解析完整的URL，它会把 = 前面的当做key, = 后面当做value， 例如：
let url = 'www.baidu.com?a=1&b=2';
let searchParams = new URLSearchParams(url);
searchParams.has('a'); // false
searchParams.has('www.baidu.com?a'); // true, 识别 = 前的为key
searchParams.has('b'); // true
- 但是字符串起始位置有
?的话会被去除，所以字符串起始位置带不带？都可以
let url1 = '?a=1&b=2';
let searchParams1 = new URLSearchParams(url1);
let url2 = 'a=1&b=2';
let searchParams2 = new URLSearchParams(url2);
searchParams1.has('a'); // true
searchParams2.has('a'); // true
