如何使用纯原生JavaScript获取页面URL的GET参数？

推荐优先使用浏览器内置API，无需手动拆分字符串，也不需要引入任何第三方库： #

方案1：URLSearchParams 内置接口（主流浏览器全支持） #

Chrome 49+、Firefox 44+、Safari 10.1+、Edge 17+都完全支持该接口，内置处理了参数编码、特殊字符、多值参数等所有边界情况，代码极简：

// 直接传入当前页面的查询字符串部分构造参数对象
const queryParams = new URLSearchParams(window.location.search)

常用操作示例：

• 获取指定参数的值：queryParams.get('parameter1')，示例场景下返回值为 "one"
• 判断参数是否存在：queryParams.has('parameter3')，存在返回true，不存在返回false
• 获取同一个参数的多个值（适用于?a=1&a=2这类同参数多值的场景）：queryParams.getAll('a')，返回值数组
• 遍历所有参数：

  for (const [key, value] of queryParams.entries()) {
    console.log(`${key}: ${value}`)
  }
  

小提示：window.location.search 本身就是当前URL中?开头的查询字符串部分，不需要从完整href里手动截取域名、路径部分，比自己处理完整URL的逻辑更简单。

方案2：手写解析函数（兼容IE等旧浏览器） #

如果需要适配不支持URLSearchParams的极旧浏览器，可以自己实现解析逻辑，代码如下：

function getQueryParams() {
  // 去掉查询字符串开头的?符号，无参数时直接返回空对象
  const searchStr = window.location.search.slice(1)
  if (!searchStr) return {}
  // 拆分参数对后逐个解码存入对象
  return searchStr.split('&').reduce((params, keyValuePair) => {
    const [key, value] = keyValuePair.split('=').map(decodeURIComponent)
    params[key] = value
    return params
  }, {})
}

// 使用示例
const params = getQueryParams()
console.log(params.parameter2) // 示例场景下返回值为 "two"

内容的提问来源于stack exchange，提问作者raylight