JavaScript获取地址栏查询参数方式汇总

面试官：获取地址栏查询参数的方式有哪些？能手写一个吗？

本身先想一分钟

曾几什么时候，当我去一家公司面试，面试官问过我这道面试题，我回答上来了却没有手写出来。因此这篇文章只是为了之后便于学习，故搜集整理，与君共勉之！线上代码：Codepen。

1. 正则替换

// 来自掘金前端冒菜师的分享：https://juejin.im/pin/5d19b4fc518825026ec4c34c
// 兼容性更好，IE6+
function getURLParams() {
  const q = {}
  const url = 'https://codepen.io/gongph/pen/YoaJBK?editors=0010&type=new&uuid=2'
  url.replace(/([^?&=]+)=([^&]+)/g, (_, k, v) => {
    console.log(_, k, v)
    // -> `editors=0010`, `editors`, `0010`
    q[k] = v
  })
  return q
}
复制代码

该方法返回一个对象。形如：

q = {
  'editors': '0010',
  'type': 'new',
  'uuid': '2'
}

// 所以，若是你想获取某个查询参数，好比 `editors`, 直接:
console.log(q['editors'])
// -> '0010'
复制代码

2. 正则匹配

// 兼容性更好，IE6+
function getUrlParamByName(name) {
  const reg = new RegExp('(^|&)' + name + '=([^&]*)(&|$)');
  // 获取地址栏的查询参数字符串
  const search = window.location.search;
  if (search) {
    const r = decodeURIComponent(search).substring(1).match(reg);
    if (r) return unescape(r[2]);
  }
  return '';
}
复制代码

经过参数名便可获取想要的值，好比：

const val = getUrlParamByName('editors')
console.log(val)
// -> '0010'
复制代码

3. URL对象

// 来自掘金 Allan91 的分享：https://juejin.im/pin/5d197b8c518825026ec4c311
// 兼容指数：IE10+
function getURLParamByKey(key) {
  const url = 'https://codepen.io/gongph/pen/YoaJBK?editors=0010&type=new&uuid=2'
  return new URL(url).searchParams.get(key)
}
复制代码

一样，若是你想获取某个查询参数的值，只须要：

const val = getURLParamByKey('editors')
console.log(val)
// -> '0010'
复制代码

浏览器自带的 URL 处理接口，了解更多请参考 MDN。若是采用这种方式获取，须要作一下 polyfill，你懂得。

4. URLSearchParams 对象

// MDN：https://developer.mozilla.org/en-US/docs/Web/API/URLSearchParams
// 兼容性：IE尚不支持
function getURLParamByKey (key) {
  const searchParams = new URLSearchParams(location.search)
  return searchParams.get(key)
}
复制代码

一样，若是你想获取某个查询参数的值，只须要：

const val = getURLParamByKey('editors')
console.log(val)
// -> '0010'
复制代码

浏览器自带的 URLSearchParams 接口，了解更多请参考 MDN。因为 IE 不支持此接口，须要作兼容性处理。

5. split

这种方式是效率最差，代码量最多的一种，不推荐。

// 效率最差，代码量最多
// 面试的时候最好最后一个再说它
// 不要一上来就说它，对面试官的印象很差
function getURLParamsBySplit () {
  // 获取查询参数
  var search = location.search
  // 截取`?`后面的参数
  var paramStr = decodeURIComponent(search).substring(1)
  // 经过 split 截取
  var params = paramStr.split('&')
  // 遍历获取每一个参数
  var searchObj = {}
  for (let i = 0; i < params.length; i++) {
    // 经过 `=` 截取获取 key 和 value
    var arr = params[i].split('=')
    // 保存到新对象里
    // 格式：{ key: value, key2: value2 }
    searchObj[arr[0]] = unescape(arr[1])
   }
   return searchObj
}
复制代码

这种方式也是将查询参数转成对象，获取时传对应的 key 便可：

searchObj = {
  'editors': '0010',
  'type': 'edit',
  'uuid': '2'
}

console.log(searchObj['editors'])
// -> '0010'
复制代码

Enjoy it !

最后

啰嗦了这么多，但愿看到的同窗或多或少有点收获吧。不对的地方还请留言指正，谢谢。在学习的道路上，只要天天看看社区，看看文档，写写Demo，天天进步一点点，总会有收获的。俗话说，三人行则必有我师，但愿更多志同道合的小伙伴能聚在一块儿交流技术！下面的群我在维护，感兴趣能够进来哦！备注来自掘金便可。也能够加我微信G911214255拉你进群。