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");
复制代码      

最后