关于url:2021年最新获取url参数的方法用正则就落后啦

前言：置信大家对获取浏览器参数都很相熟，第一反馈是应用正则表达式去对浏览器的参数进行切割获取，然而浏览器曾经提供了一个 URLSearchParams 这个接口给咱们去操作 URL 的查问字符串

应用正则表达式获取 url
温故而知新，先上一下咱们惯例应用正则表达式去获取 url 参数的代码

function getParams(url, params){

  var res = new RegExp("(?:&|/?)" + params + "=([^&$]+)").exec(url);
  return res ? res[1] : '';

}

// url: xx.com?id=2&isShare=true
const id = getParams(window.location.search, ‘id’)

console.log(id) // 2
复制代码
然而，当初再也不必正则这么简单去获取浏览器的查问参数啦，浏览器给咱们间接提供了一个 URLSearchParams 接口，让咱们能够对查问参数有很大的操作空间，而且比起之前应用正则，更加简洁间接

对于 URLSearchParams 办法
代码实现
首先把怎么应用 URLSearchParams 办法实现获取 url 参数的代码呈上

const urlSearchParams = new URLSearchParams(window.location.search);
const params = Object.fromEntries(urlSearchParams.entries());

console.log(params) // {id: ‘2’, isShare: ‘true’}
console.log(params.id) // 2
复制代码
是不是超级简略，只须要以 url 作为参数传入，并且创立 URLSearchParams 的一个实例对象，而后调用 entries()这个办法，返回一个迭代协定 iterator，该协定反对能够遍历所有反对健 / 值对的列表

此时还须要通过 Object.fromEntries()这个办法去把该健 / 值对的列表，而后咱们就能够欢快地应用获取到的参数啦

URLSearchParams 的兼容性
搜了一下 URLSearchParams 的兼容性查问，详情请点击

IE 真的是万恶之源，其余古代浏览器的兼容性都杠杠的，如果是不须要兼容 IE 的我的项目，能够释怀食用

如果切实要兼容 IE，也不要怕，能够应用 url-search-params-polyfill 这个插件去应用啦

装置形式：

npm install url-search-params-polyfill –save
复制代码
应用形式:

const params = new URLSearchParams(“id=2&isShare=true”);
复制代码
最初
如果你感觉此文对你有一丁点帮忙，点个赞。或者能够退出我的开发交换群：1025263163 互相学习，咱们会有业余的技术答疑解惑

如果你感觉这篇文章对你有点用的话，麻烦请给咱们的开源我的项目点点 star: https://gitee.com/ZhongBangKe… 不胜感激！