3分鐘搞定：獲取 URL 查詢參數值

在前端開發工作中，利用 URL 進行參數傳遞是一項十分常見的方法。在頁面跳轉時，通過 URL 攜帶某些信息，如狀態、id、區分頁面來源的字段值等。因此，學習瞭解如何獲取 URL 查詢參數值是很重要的。

js 代碼手擼

利用 JavaScript 代碼手擼一個函數，對 URL 查詢參數進行解析。這是方式靈活度高，可以進行更多個性化的操作。

const getSearchParams = (url) => {
  // 獲取查詢參數前的 ? 對應的索引位置
  const searchIndex = url.indexOf('?')
  // 截取出查詢參數字符串，並根據 & 將其分割成一個個 name=bruce 形式字符串組成的數組
  const searchParamsArray = url.slice(searchIndex + 1).split('&')
  // 遍歷數組，組成查詢參數對象
  return searchParamsArray.reduce((pre, cur) => {
    const [key, value] = cur.split('=')
    return {
      ...pre,
      // 需要使用 decodeURIComponent 對參數進行解碼
      [key]: decodeURIComponent(value),
    }
  }, {})
}

// { name: 'bruce', type: 'blog' }
getSearchParams('https://www.example.com?name=bruce&type=blog')

利用 URLSearchParams

const searchParams = new URLSearchParams('name=bruce&type=blog')

searchParams.get('name') // 'bruce'
searchParams.get('type') // 'blog'
searchParams.has('type') // true

要把所有查詢參數轉換為對象，需要搭配使用 entries() 和 Object.fromEntries() 方法。

entries() 方法返回一個 iterator，還需進一步轉換為對象。

const searchEntries = searchParams.entries();
Object.fromEntries(searchEntries) // { name: 'bruce', type: 'blog' }

需要注意的是，URLSearchParams 只能解析查詢字符串，不能解析完整的 URL。因此若要使用其解析查詢參數，需要事先提取出 URL 地址的查詢字符串。

const params = new URLSearchParams('https://www.example.com?name=bruce&type=blog')

params.get('name') // null
params.get('https://www.example.com?name') // 'bruce'

參考鏈接：MDN-URLSearchParams

利用 URL

const params = new URL('https://www.example.com?name=bruce&type=blog')
const searchParams = params.searchParams

searchParams.get('name') // 'bruce'
searchParams.get('type') // 'blog'

URL 可對 URL 地址進行更多維度的解析，其中 searchParams 和 URLSearchParams 返回的對象相同。

參考鏈接：MDN-URL