URLSearchParams 物件

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

之前，對 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"));

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

程式碼分析如下：

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

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

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

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

程式碼分析如下：

（1）.建構函式的引數是一個陣列，陣列中的每一個元素是具有兩個元素的陣列。

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

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

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

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

程式碼分析如下：

（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]);
}

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

每一個成員都儲存著 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例項方法: