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

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

像這樣:

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

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

您可以有多個參數,像這樣:

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

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

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

這是我們如何使用它:

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

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

在這種情況下:

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

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

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

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

params.has('test')

您可以獲取參數的值:

params.get('test')

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

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

一個參數可以有多個值。

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

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()生成新的查詢字符串。