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

URLSearchParams定義

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

方法

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