前言
現在有這麼個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"
複製程式碼有時候不知道一個欄位是否存在，所以想事先校驗下。使用例項的has方法進行判斷，程式碼：
searchParams.has('wd') // true
searchParams.has('age') // false
複製程式碼新增欄位
例項提供了append方法來新增欄位，這個方法接收兩個引數，前者是key，後者是value，程式碼：
searchParams.append('age', 26);
searchParams.has('age'); // true
searchParams.get('age'); // 26
複製程式碼刪除欄位
現在不想要year欄位了，直接使用delete即可，程式碼：
searchParams.delete('year');
searchParams.has('year'); // false
複製程式碼設定欄位
有時候想重寫一個欄位，而不是新增(append)一個欄位，這時候需要使用set方法，比如，我們覺得坤哥不僅會籃球，還會唱，跳，rap。程式碼：
searchParams.set('skill', '籃球 唱 跳 rap');
複製程式碼轉為字串
修改例項後，有時候需要再轉為字串，進行路由跳轉等，使用toString方法
searchParams.toString(); // "wd=蔡徐坤&skill=籃球+唱+跳+rap&year=2019&age=26"
複製程式碼一波操作後
相容性
現代瀏覽器基本沒有啥大問題，但是IE的支援不是很理想。