通过url传递参数是我们在开发中经常用到的一种参数传递方法。下面文章主要介绍前端JS获取URL参数的四种方法，通过示例代码详细介绍。有需要的朋友可以参考一下。
目录
前言方法1:字符串拆分方法方法2:使用URLSearchParams方法3:使用正则匹配方法方法4:使用第三方库qs总结：
前言
对于前端来说，无论在面试还是工作中，都可能会遇到url参数的处理问题。项目开发不一定要用框架，有自己获取参数的方式。然而，除了使用框架，我们还可以使用原生js方法或借用第三方库来获取和对象化参数。在此，将对具体用法进行介绍和梳理。
方法1: 字符串 split 方法
因为一个url地址是字符串的形式，所以参数是用split的方法提取的，这个方法比较常用，也比较好理解(对于不太会用正则的我来说，哈哈~)
let URL='http://www.baidu.com？姓名=张三年龄=25性别=男老婆=小红'
函数getUrlParams(url) {
//通过？获取拆分后的参数字符串。
let urlStr=url.split('？'))[1]
//创建空对象存储参数
设obj={ }；
//然后分隔每个参数。
let paramsArr=urlStr.split(' ')
for(设i=0，len=paramsArr.length我leni ){
//将每个参数分成key:value by=的形式
设arr=paramsArr[i]。拆分('=')
obj[arr[0]]=arr[1]；
}
返回对象
}
console.log(getUrlParams(URL))
方法2: 利用 URLSearchParams 方法
在MDN中，结合了两种方法来获取参数：1 .使用新的URLSearchParams(url)方法返回一个URLSearchParams对象，然后调用entries()方法返回一个迭代器；2.使用Object.fromEntries(iterable)方法将其转换为普通对象。
let URL='http://www.baidu.com？' name=Jackage=25 sex=men wife=Lucy '
函数getUrlParams2(url) {
let urlStr=url.split('？'))[1]
const urlSearchParams=新的URLSearchParams(urlStr)
const result=object . from entries(urlsearchparams . entries())
回送结果
}
console.log(getUrlParams2(URL))
特别的:URLSearchParams方法不仅可以获取参数，还可以将参数对象转换为字符串。详细用法见MDN中的介绍，此方法存在浏览器兼容性问题。
方法3: 利用正则匹配方法
匹配功能强大。相信很多朋友都知道，它不仅可以验证账号、密码、邮箱、手机号等。在登录注册的时候，还要处理一些字符串(比如检查，替换，抽取等。)非常方便。难点在于经常使用的熟练程度。在这里，字符串中所需的字符是通过常规使用提取的。
let URL='http://www.baidu.com？'名字=汤姆朋友=杰瑞'
函数getUrlParams3(url){
//\w表示至少匹配一个(数字、字母、下划线)，[\u4e00-\u9fa5]表示至少匹配一个汉字。
let pattern=/(\ w |[\ u4e 00-\ u9fa 5])=(\ w |[\ u4e 00-\ u9fa 5])/ig；
假设结果={ }；
url.replace(pattern，($，$1，$2)={
结果[$ 1]=$ 2；
})
回送结果
}
console.log(getUrlParams3(URL))
方法4: 使用第三方库 qs
使用第三方库qs还可以实现url中参数字符的提取，还可以实现参数对象到url参数形式的转换。需要注意的是，在引入浏览器cdn方法时，默认情况下会将其添加到全局对象窗口的Qs属性中。
script src=' https://cdn . bootcdn . net/Ajax/libs/QS/6 . 10 . 3/QS . min . js '/script
脚本
let URL='http://www.baidu.com？产品='iPhone 13 Pro '价格=9999.00 '
函数getUrlParams4(url){
//引入qs库时，默认挂在全局窗口的Qs属性上
//console.log(窗口)
let urlStr=url.split('？'))[1]
let result=Qs.parse(urlStr)
//拼接的附加参数
let otherParams={
数字：50，
尺寸：6.1
}
设str=Qs.stringify(otherParams)
设newUrl=url字符串
返回{result，newUrl}
}
console.log(getUrlParams4(URL))
/脚本
总结：
关于前端JS获取URL参数的四种方法，本文到此结束。有关通过前端获取URL参数的更多信息，请搜索我们以前的文章或继续浏览下面的相关文章。希望大家以后能多多支持我们！
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。