URLSearchParams（鮮為人知處理URL地址的技能）

最近學習中無意發現url新處理方式，看到之后十分感興趣就整理了一下。

URLSearchParams

URLSearchParams 接口定義了一些實用的方法來處理 URL 的查詢字符串。參照

URLSearchParams() 構造器創建並返回一個新的URLSearchParams 對象。 開頭的'?' 字符會被忽略。

方法

append(name,value)

@function 插入一個指定的鍵/值對作為新的搜索參數。
@param name 需要插入搜索參數的鍵名
@param value 需要插入參數的值

const url = new URL(`http://www.programmer.com?a=1&b=2`);
const searchParams = new URLSearchParams(url.search);
searchParams.append('c',3);
console.log(searchParams.toString())

運行結果

// a=1&b=2&c=3

delete(name)

@function 刪除指定名稱的所有搜索參數。
@param name 需要刪除的鍵值名稱

const url = new URL(`http://www.programmer.com?a=1&b=2`);
const searchParams = new URLSearchParams(url.search);
searchParams.delete('b');
console.log(searchParams.toString())

運行結果

// a=1

entries()

@function 返回一個iterator可以遍歷所有鍵/值對的對象。
@return {iterator}

const url = new URL(`http://www.programmer.com?a=1&b=2`);
const searchParams = new URLSearchParams(url.search);
const paramArr = searchParams.entries();
for(const item of paramArr){
    console.log(item)
}

運行結果

// ['a', '1']
// ['b', '2']

get(name)

@function 獲取指定搜索參數的第一個值。
@param name 將要返回的參數的鍵名。
@return 返回一個 USVString ；如果沒找到，返回 null.

const url = new URL(`http://www.programmer.com?a=1&b=2`);
const searchParams = new URLSearchParams(url.search);
console.log(searchParams.get('a'))

運行結果

// 1

getAll(name)

@function 獲取指定搜索參數的所有值，返回是一個數組。
@param name 將要返回的參數的鍵名。
@return 一個USVString數組。

const url = new URL(`http://www.programmer.com?a=1&b=2`);
const searchParams = new URLSearchParams(url.search);
console.log(searchParams.getAll('a'))

運行結果

// [1]

has(name)

@function 判斷是否存在此搜索參數。
@param name 查找的參數的鍵名。
@return { Boolean }

const url = new URL(`http://www.programmer.com?a=1&b=2`);
const searchParams = new URLSearchParams(url.search);
console.log(searchParams.has('a'))

運行結果

// true

keys()

@function 返回iterator 此對象包含了鍵/值對的所有鍵名。
@return 返回一個iterator.

const url = new URL(`http://www.programmer.com?a=1&b=2`);
const searchParams = new URLSearchParams(url.search);
const keys = searchParams.keys()
for(let key of keys){
    console.log(key)
}

運行結果

// a
// b

set(name, value)

@function 用於設置和搜索參數相關聯的值。如果設置前已經存在匹配的值，該方法會刪除多余的，如果將要設置的值不存在，則創建它
@param name 將要設置的參數的健值名。
@param value 所要設置的參數值。

const url = new URL(`http://www.programmer.com?a=1&b=2`);
const searchParams = new URLSearchParams(url.search);
searchParams.set('a', 11);
console.log(searchParams.toString());
searchParams.set('w', 222);
console.log(searchParams.toString());
     

運行結果

// a=11&b=2
// a=11&b=2&w=222

sort(name, value)

@function 對包含在此對象中的所有鍵/值對進行排序，並返回undefined。排序順序是根據鍵的Unicode代碼點。該方法使用穩定的排序算法 (即，將保留具有相等鍵的鍵/值對之間的相對順序)。

const url = new URL(`http://www.programmer.com?a=1&b=2`);
const searchParams = new URLSearchParams(url.search);
searchParams.sort();
console.log(searchParams.toString());

運行結果

// a=1&b=2

toString()

@function 返回適用在URL中的查詢字符串。
@return { String }

const url = new URL(`http://www.programmer.com?a=1&b=2`);
const searchParams = new URLSearchParams(url.search);
console.log(searchParams.toString());

運行結果

// a=1&b=2

values()

@function 返回一個iterator，該遍歷器允許遍歷對象中包含的所有值。這些值都是USVString對象。
@return iterator

const url = new URL(`http://www.programmer.com?a=1&b=2`);
const searchParams = new URLSearchParams(url.search);
const values = searchParams.values()
for(var value of values) {
     console.log(value);
}

運行結果

// 1
// 2 

實戰

我們獲取url上的參數之前會這么寫

function getParams(url) {
  const res = {}
  if (url.includes('?')) {
    const str = url.split('?')[1]
    const arr = str.split('&')
    arr.forEach(item => {
      const key = item.split('=')[0]
      const val = item.split('=')[1]
      res[key] = decodeURIComponent(val) // 解碼
    })
  }
  return res
}


const user = getParams('http://www.programmer.com?a=1&b=2')
console.log(user) 
// { a: 1, b: 1 }

如今學會了，只需兩行代碼搞定 加班那不可能

const url = new URL(`http://www.programmer.com?a=1&b=2`);
const searchParams = new URLSearchParams(url.search);
const params = Object.fromEntries(searchParams.entries());
console.log(params)
// { a: 1, b: 1 }