URLSearchParams 物件

admin發表於2020-04-03

URLSearchParams 物件定義了用於構造或者解析 url 查詢字串的一系列方法。

之前,對 URL 查詢字串進行相關操作相對複雜,參閱獲取 url 傳遞 引數值 一章節。

一.建立 URLSearchParams 例項:

通過建構函式 URLSearchParams() 建立一個物件例項。

語法結構:

[JavaScript] 純文字檢視 複製程式碼
let urlSearchParam = new URLSearchParams(init);

引數解析:

(1).init:可選,有多種引數形式,目的就是構建查詢字串鍵值對。

[JavaScript] 純文字檢視 複製程式碼執行程式碼
let str = "?mod=viewthread&tid=4596";
let urlSearchParam = new URLSearchParams(str);
console.log(urlSearchParam.get("mod"));

程式碼執行效果截圖如下:

a:3:{s:3:\"pic\";s:43:\"portal/202004/03/123600ryjyvyk5v3vw5vgs.png\";s:5:\"thumb\";s:0:\"\";s:6:\"remote\";N;}

程式碼分析如下:

(1).建構函式的引數是一個URL 查詢字串。

(2).最前的問號(?)可以帶也可以不帶,但是問號左側的內容必須要去掉。

[JavaScript] 純文字檢視 複製程式碼執行程式碼
let arr=[["a",1],["b",2]];
let urlSearchParam = new URLSearchParams(arr);
console.log(urlSearchParam.get("a"));

程式碼執行效果截圖如下:

a:3:{s:3:\"pic\";s:43:\"portal/202004/03/123633h7t11p3ii2tm2llp.png\";s:5:\"thumb\";s:0:\"\";s:6:\"remote\";N;}

程式碼分析如下:

(1).建構函式的引數是一個陣列,陣列中的每一個元素是具有兩個元素的陣列。

(2).每一個成員陣列都被解析為查詢字串中的鍵值對。

(3).作為鍵的部分必須要加引號,否則會報錯,比如 [[a,1],[b,2]] 報錯。

[JavaScript] 純文字檢視 複製程式碼執行程式碼
let obj={"a" : 1 , "b" : 2};
let urlSearchParam = new URLSearchParams(obj);
console.log(urlSearchParam.get("a"));

程式碼執行效果截圖如下:

a:3:{s:3:\"pic\";s:43:\"portal/202004/03/123712tfah8avevvmvm4ee.png\";s:5:\"thumb\";s:0:\"\";s:6:\"remote\";N;}

程式碼分析如下:

(1).建構函式引數可以是一個物件,物件的每一個鍵值對構成URL查詢字串的鍵值對。

(2).物件的鍵可以帶引號,也可以不帶,與上面的陣列不同。

二.程式碼例項:

URLSearchParams 物件是對URL查詢字串的操作。

通過for  of可以獲取所有的查詢字串鍵值對,程式碼如下:

[JavaScript] 純文字檢視 複製程式碼執行程式碼
let str = "?mod=viewthread&tid=4596";
let urlSearchParam = new URLSearchParams(str);
for (let keyValue of urlSearchParam) {
  console.log(keyValue[0] + ":" + keyValue[1]);
}

程式碼執行效果截圖如下:

a:3:{s:3:\"pic\";s:43:\"portal/202004/03/123756znmmygy2ppgjxxyg.png\";s:5:\"thumb\";s:0:\"\";s:6:\"remote\";N;}

每一個成員都儲存著 URL 查詢字串的鍵值對。

[JavaScript] 純文字檢視 複製程式碼
let str = "?mod=viewthread&tid=4596";
let urlSearchParam = new URLSearchParams(str);
fetch("https://www.softwhy.com/antApi", {
  method: "post",
  body: urlSearchParam
}).then(function(){
    // code
})

 可以直接當做表單資料傳送到伺服器進行相關處理。

URLSearchParams例項方法:

方法    描述
append()                 新增新的 key/value 到 URL 中。
delete()            刪除所有匹配的 key/value 值,重複的 key 都被刪除。
entries()            返回所有鍵值對 key/value。
forEach()遍歷 URL 查詢字串中的所有鍵值對。
get()            返回與給定 key 匹配的第一個 value 值。      
getAll()          返回所有與給定 key 匹配 value 值。     
has()            查詢指定 key 是否存在,返回一個布林值。
keys()            返回所有鍵 key。
set()            設定 key 的 value 值。
toString()            返回 URL 字串。
values()            返回所有值。

相關文章