写点什么

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

  • 2021 年 11 月 13 日
  • 本文字数:934 字

    阅读完需:约 3 分钟

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=trueconst 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/ZhongBangKeJi/CRMEB不胜感激 !

用户头像

还未添加个人签名 2021.11.02 加入

CRMEB就是客户关系管理+营销电商系统实现公众号端、微信小程序端、H5端、APP、PC端用户账号同步,能够快速积累客户、会员数据分析、智能转化客户、有效提高销售、会员维护、网络营销的一款企业应用

评论

发布
暂无评论
2021年最新获取url参数的方法,用正则就落后啦