/

如何使用URLSearchParams在JavaScript中获取查詢字符串值

如何使用URLSearchParams在JavaScript中获取查詢字符串值

使用URLSearchParams訪問和修改查詢字符串值

HTTP協議允許使用查詢字符串發送對網頁的請求。

像這樣：

1
2
https://test.com/?name=roger
https://test.com/hello?name=roger

這種情況下，我們有一個名為name的單一查詢參數，其值為roger。

您可以有多個參數，像這樣：

1
https://test.com/hello?name=roger&age=20

通常情況下，通過查詢字符串傳遞的參數在服務器端用於生成適當的響應。這是如何使用Node.js訪問查詢參數的方式。

要在瀏覽器中使用JavaScript訪問查詢的值，我們有一個名為URLSearchParams的特殊API，所有現代瀏覽器都支持它。

這是我們如何使用它：

1
const params = new URLSearchParams(window.location.search)

注意：不要將完整URL作為參數傳遞給URLSearchParams()，而只需將URL的查詢字符串部分作為參數傳遞給它，這可以通過window.location.search獲得。

在這種情況下：

1
https://test.com/hello?name=roger

window.location.search等於字符串?name=roger。

現在，您擁有了params對象，可以對其進行查詢操作。

您可以檢查是否傳遞了某個參數：

1
params.has('test')

您可以獲取參數的值：

1
params.get('test')

您可以使用for..of迭代所有參數：

1
2
3
4
const params = new URLSearchParams(window.location.search)
for (const param of params) {
 console.log(param)
}

一個參數可以有多個值。

在這種情況下，我們多次傳遞相同的參數名，像這樣：

1
https://test.com/hello?name=roger&name=flavio

我們無法檢測到某個參數是否被多次傳遞。如果我們使用params.get('name')，我們只會得到第一個值。

我們可以使用params.getAll('name')來獲取傳遞的所有值的數組。

除了has()，get()和getAll()之外，URLSearchParams API還提供了其他幾個方法，我們可以使用這些方法來循環遍歷參數：

  • forEach()遍歷參數
  • entries()返回包含參數鍵/值的迭代器
  • keys()返回包含參數鍵的迭代器
  • values()返回包含參數值的迭代器

其他用於修改參數的方法，用於在頁面中運行的其他JavaScript中（它們不會更改URL）：

  • append()用於向對象附加新參數
  • delete()用於刪除現有參數
  • set()用於設置參數的值

我們還可以使用sort()按鍵值對參數進行排序，並且有toString()方法可以從這些值生成查詢字符串。

我們可以使用append()/set()/delete()來編輯查詢字符串，並使用toString()生成新的查詢字符串。