瀏覽器 Window 內(nèi)置的 URLSearchParams 接口定義了一些實用的方法來處理 URL 的查詢字符串，再也不用 & 字符串分割的方式去解析 url query 參數(shù)了垛贤。
JS && URLSearchParams
一、URLSearchParams 構(gòu)造函數(shù)
URLSearchParams() 構(gòu)造器創(chuàng)建并返回一個新的 URLSearchParams 對象此疹。開頭的 ? 字符會被忽略。
let oUSP = URLSearchParams()
console.log(oUSP)
/*
URLSearchParams {}
[[Prototype]]: URLSearchParams
append: ? append()
delete: ? delete()
entries: ? entries()
forEach: ? forEach()
get: ? ()
getAll: ? getAll()
has: ? has()
keys: ? keys()
set: ? ()
sort: ? sort()
toString: ? toString()
values: ? values()
constructor: ? URLSearchParams()
Symbol(Symbol.iterator): ? entries()
Symbol(Symbol.toStringTag): "URLSearchParams"
[[Prototype]]: Object
* */
二遮婶、URLSearchParams 方法
該接口不繼承任何屬性蝗碎。
- append：插入一個指定的鍵/值對作為新的搜索參數(shù)。
- delete：從搜索參數(shù)列表里刪除指定的搜索參數(shù)及其對應的值旗扑。
- set：設置一個搜索參數(shù)的新值蹦骑，假如原來有多個值將刪除其他所有的值。
- keys：返回iterator 此對象包含了鍵/值對的所有鍵名臀防。
- values：返回iterator 此對象包含了鍵/值對的所有值眠菇。
- entries：返回一個iterator可以遍歷所有鍵/值對的對象。
- forEach：插入一個指定的鍵袱衷。
- get：獲取指定搜索參數(shù)的第一個值捎废。
- getAll：獲取指定搜索參數(shù)的所有值，返回是一個數(shù)組致燥。
- has：返回 Boolean 判斷是否存在此搜索參數(shù)登疗。
- sort：按鍵名排序。
- toString：返回搜索參數(shù)組成的字符串，可直接使用在 URL 上辐益。
三断傲、使用示例
let { search } = new URL('https://tiven.cn?id=12&dt=2022-10-10&sort=desc')
console.log(search) // ?id=12&dt=2022-10-10&sort=desc
// 創(chuàng)建 URLSearchParams 對象
let p1 = new URLSearchParams(search);
let p2 = new URLSearchParams([["id", 12], ["dt", '2022-10-10'], ["sort", 'desc']]);
let p3 = new URLSearchParams({"id": 12 , "dt": '2022-10-10', "sort": 'desc'});
console.log(p1.toString()) // id=12&dt=2022-10-10&sort=desc
console.log(p2.toString()) // id=12&dt=2022-10-10&sort=desc
console.log(p3.toString()) // id=12&dt=2022-10-10&sort=desc
// entries
for (let [k, v] of p1.entries()) {
console.log(k, v)
}
// forEach
p1.forEach((v,k)=>{
console.log(k, v)
})
// has 判斷是否包含某個查詢參數(shù)
console.log(p1.has('id')) // true
console.log(p1.has('name')) // false
// get 獲取某個參數(shù)值
console.log(p1.get('id')) // 12
console.log(p1.get('age')) // null
// append 添加鍵值對
p1.append('name', 'Tiven')
console.log(p1.toString()) // id=12&dt=2022-10-10&sort=desc&name=Tiven
// delete 刪除鍵值對
p1.delete('name')
console.log(p1.toString()) // id=12&dt=2022-10-10&sort=desc
// sort 排序
p1.sort()
console.log(p1.toString()) // dt=2022-10-10&id=12&sort=desc
注意： URLSearchParams 構(gòu)造函數(shù)不會解析完整 URL，但是如果字符串起始位置有 ? 的話會被去除智政。
let p = new URLSearchParams('https:tiven.cn?id=12&name=Tiven')
console.log(p.has('id')) // false
console.log(p.get('id')) // null
console.log(p.toString()) // https%3Ativen.cn%3Fid=12&name=Tiven
歡迎訪問：天問博客
