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