JavaScript >> Javascript 文檔 >  >> Tags >> URL

如何使用 URLSearchParams 添加和更新查詢字符串參數

作為前端開發人員,您應該知道如何在客戶端操作查詢字符串參數。今天,我們來看看URLSearchParams JavaScript中可用於添加、更新或刪除查詢字符串參數的接口。

初始化URLSearchParams

創建 URLSearchParams 的新實例 ,只需傳遞 URL 的查詢字符串部分(帶或不帶初始 ? ) 到它的構造函數。

如果您在瀏覽器中工作,則可以使用 window.location.search 訪問當前 URL 的查詢字符串部分 :

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

或者,您可以創建一個新的 URL 對象並檢索所有查詢參數,如下所示:

// current URL
const url = "http://example.com?size=M&color=blue&price=29&sort=desc";

// create a URL object
const urlObj = new URL(url);

// initialize URLSearchParams
const params = new URLSearchParams(urlObj.search);

URLSearchParams 構造函數還接受一個 JavaScript 對象並自動將其轉換為查詢字符串:

const obj = {
    size: 'M',
    color: 'blue',
    price: 29,
    sort: 'desc'
};

// initialize URLSearchParams from object
const params = new URLSearchParams(obj);

訪問參數

要獲取查詢參數的值,可以使用 get() 方法。如果參數不存在或者為空,你會得到一個null 價值:

params.get('price')   // 29
params.get('page')  // null

要檢查某個查詢參數是否存在,您可以使用 has() 方法:

params.has('size')  // true
params.has('user')   // false

您應該始終使用 has() 在訪問參數值之前檢查參數是否存在的方法。當參數存在於 URL 但沒有值時,它可以避免誤報,即 size=&rows=12 .

獲取多個參數

有時,一個 URL 可能包含多個單個參數的值。讓我們看看下面的網址:

http://example.com?size=M&size=XL&color=blue

以上網址100%有效。如果你用 URLSearchParams 解析上面的 URL ,它將為 size 創建一個值數組 參數。

但是,如果您使用 get() 訪問size的方法 , 你只會得到第一個值 M .要獲取查詢字符串參數的所有值,您應該使用 getAll() 方法:

params.getAll('size') // [ 'M', 'XL' ]

修改參數

set() 方法可用於添加 一個新的查詢參數或更新 現有參數值:

// add new param
params.set('page', 2)

// update existing param
param.set('price', 9)

請注意,如果參數包含多個值,則 set() 方法將刪除所有這些並設置新值:

// URL: http://example.com?size=M&size=XL&color=blue&price=29&sort=desc

// change `size` to `L`
params.set('size', 'L');

console.log([...params.keys()]); // [ 'size', 'color', 'price', 'sort' ]
console.log([...params.values()]); // [ 'L', 'blue', '29', 'desc' ]

為避免覆蓋現有參數值,您應該使用 append() 代替方法。顧名思義,append() 如果它尚不存在,將添加一個新參數。否則,它將為其附加一個新值。

這是一個例子:

// URL: http://example.com?size=M&size=XL&color=blue&price=29&sort=desc

// append a new color
params.append('color', 'pink');

console.log([...params.entries()]);

// [ [ 'size', 'M' ],
//   [ 'size', 'XL' ],
//   [ 'color', 'blue' ],
//   [ 'price', '29' ],
//   [ 'sort', 'desc' ],
//   [ 'color', 'pink' ] ]

刪除 來自 URL 的查詢字符串參數,URLSearchParams 提供 delete() 方法:

// URL: http://example.com?size=M&size=XL&color=blue&price=29&sort=desc

// remove size
params.delete('size');

console.log([...params.entries()]);

// [ [ 'color', 'blue' ], [ 'price', '29' ], [ 'sort', 'desc' ] ]

如上所示,delete() 方法刪除 size 的所有值 參數。

遍歷參數

有多種方法可以遍歷 URLSearchParams 中包含的所有參數 目的。第一種方法是使用 for...of 循環:

for (const p of params) {
    console.log(p);
}

// [ 'size', 'M' ]
// [ 'size', 'XL' ]
// [ 'color', 'blue' ]
// [ 'price', '29' ]
// [ 'sort', 'desc' ]

URLSearchParams 還支持 forEach() 循環,該循環可用於通過回調函數遍歷對像中包含的所有值:

params.forEach((value, key) => {
    console.log(`${key} => ${value}`);
});

// size => M
// size => XL
// color => blue
// price => 29
// sort => desc

您也可以使用 key() , values() , 和 entries() 獲取 URLSearchParams 中可用的所有鍵、值或鍵值對的迭代器的方法 .

獲取查詢字符串

完成修改後,您可以使用 toString() 將所有參數作為查詢字符串獲取 方法:

// URL: http://example.com?size=M&size=XL&color=blue&price=29&sort=desc

// remove size
params.delete('size');

// add page
params.set('page', 1);

console.log(params.toString());

// color=blue&price=29&sort=desc&page=1

注意缺少的 ? 在查詢字符串前面。 toString() 不添加它。您需要手動使用 ? 使用新的查詢字符串更新 URL 時。

瀏覽器兼容性

在撰寫本文時,URLSearchParams 除 IE 和 Opera Mini 外,所有主流瀏覽器都支持 object。但是,您可以使用 polyfill 來確保您的應用程序即使在舊瀏覽器中也能繼續工作。


Tutorial JavaScript 教程
  1. 正則表達式用單個空格替換多個空格

  2. 用於 React 和 Chakra UI 的最時尚的管理模板!

  3. 引導程序 5 文件

  4. 如何使用 JS 進行動態引導分頁?

  5. 在 React 中拖放

  6. 德諾來了

  7. 使用 JavaScript 格式化日期

  1. 在 Vue 3 中使用 Vue Router 構建 Cat Facts 應用程序!

  2. JavaScript 映射 forEach() |方法

  3. 使用 typescript 構建 React Cine World - 電影應用程序

  4. 如何在 Node.js 中使用 ES 模塊

  5. 調試 TypeScript 代碼庫

  6. 使用 NodeJS 創建氣泡圖

  7. 使用 Heroku CLI 在 Heroku 平台上託管 NodeJs 應用程序

  1. Setinterval React:在 React 中取消 setInterval

  2. 了解 React 構建工作流程和文件夾結構

  3. 如何使用 Node-RED 發送 SMS 消息

  4. 在 React 中使用 Web Share API