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

10,189 阅读2分钟

小知识,大挑战!本文正在参与「程序员必备小知识」创作活动

本文已参与「掘力星计划」,赢取创作大礼包,挑战创作激励金

前言:相信大家对获取浏览器参数都很熟悉,第一反应是使用正则表达式去对浏览器的参数进行切割获取,然而浏览器已经提供了一个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的兼容性查询,详情请点击

image.png

IE真的是万恶之源,其他现代浏览器的兼容性都杠杠的,如果是不需要兼容IE的项目,可以放心食用

如果实在要兼容IE,也不要怕,可以使用url-search-params-polyfill这个插件去使用啦

安装方式:

npm install url-search-params-polyfill --save

使用方式:

const params = new URLSearchParams("id=2&isShare=true");

结语

以上是我使用URLSearchParams()对浏览器的参数进行获取,希望能对大家有帮助~你的赞对我来说很重要,希望能获得你的赞👍~大家也可以多在评论区交流讨论哦,谢谢啦~

更多文章推荐:

「看一眼,Vue3 script-setup语法糖下组件通信就学会了(附源码)」

「超详细!监听微信小程序五种切后台情况」

「不再迷茫!看了这篇文章让你上手Vue3.0开发有丝滑般体验」

「三分钟学会使用requestAnimationFrame实现倒计时」

「欢迎在评论区讨论,掘金官方将在掘力星计划活动结束后,在评论区抽送100份掘金周边,抽奖详情见活动文章」