前端必知必會--操做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"
複製代碼

有時候不知道一個字段是否存在，因此想事先校驗下。使用實例的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的支持不是很理想。

外鏈

• MDN參考
• 博客地址查看 jser.tech