如何在 JavaScript 中將所有查詢字符串參數作為對象獲取

在 JavaScript 中，您可以使用 URLSearchParams 將查詢字符串轉換為對象的接口。它提供了處理 URL 查詢字符串的實用方法。

1. 將查詢字符串傳遞給URLSearchParams 構造函數將其轉換為對象實例。
2. 使用 get() 訪問查詢字符串參數的方法。
3. 要獲取原生 JavaScript 對象，請將對象實例傳遞給 Object.fromEntries() 方法。

const qs = `?size=M&price=29&sort=desc`

const params = new URLSearchParams(qs)

console.log(params.get('size')) // M
console.log(params.get('price')) // 29
console.log(params.get('sort')) // desc

// Convert to native JS object
const obj = Object.fromEntries(params)
console.log(obj)
// { size: 'M', price: '29', sort: 'desc' }

在網絡瀏覽器中，只需傳遞 window.location.search 到 URLSearchParams 將查詢字符串轉換為對象的構造函數：

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

如果你有一個完整的 URL，創建一個新的 URL 對象來檢索查詢字符串，然後將它傳遞給 URLSearchParams 構造函數：

const url = new URL('http://example.com?size=M&price=29&sort=desc')

const params = new URLSearchParams(url.search)

Object.fromEntries() 只要沒有重複的查詢字符串參數，函數就可以正常工作。如果你有類似 ?size=M&size=XL , 你只會得到 { size: 'XL' } .

要處理重複的查詢字符串參數，請改用以下方法：

const qs = `?size=M&size=XL&price=29&sort=desc`

const params = new URLSearchParams(qs)

const obj = {}
for (const key of params.keys()) {
  if (params.getAll(key).length > 1) {
    obj[key] = params.getAll(key)
  } else {
    obj[key] = params.get(key)
  }
}

console.log(obj)
// { size: [ 'M', 'XL' ], price: '29', sort: 'desc' }

閱讀本文，了解如何在 JavaScript 中將對象轉換為查詢字符串。