通过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))

特别的

方法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参数的更多信息，请搜索我们以前的文章或继续浏览下面的相关文章。希望大家以后能多多支持我们！