前端必知必会--操作URL的黑科技

前言
现在有这么个URL：www.baidu.com/s?wd=蔡徐坤&skill=篮球&year=2019 ，怎么才能获取query上的字段呢？这时候正则表达式就派上用场了，效果如图：

杀鸡焉用牛刀呢，今天我们来学习下专门用来处理URL的query的接口：URLSearchParams 。

简单使用
只需要new一个URLSearchParams的实例即可，代码：

let url = '?wd=蔡徐坤&skill=篮球&year=2019';
let searchParams = new URLSearchParams(url);

for (let p of searchParams) {
  console.log(p);
}
// ["wd", "蔡徐坤"]
// ["skill", "篮球"]
// ["year", "2019"]

获取单个字段
假如现在我只想获取单个字段的值，该怎么办呢？只需要调用这个实例的get方法即可， 代码：

searchParams.get('wd') // "蔡徐坤"
searchParams.get('skill') // "篮球"
searchParams.get('year') // "2019"

添加字段
实例提供了append方法来添加字段，这个方法接收两个参数，前者是key，后者是value，代码：

searchParams.append('age', 26);
searchParams.has('age'); // true
searchParams.get('age'); // 26

兼容性
现代浏览器基本没有啥大问题，但是IE的支持不是很理想。