第前端JS獲取URL參數(shù)的4種方法總結(jié)目錄前言方法1:字符串split方法方法2:利用URLSearchParams方法方法3:利用正則匹配方法方法4:使用第三方庫qs總結(jié):

前言

對于前端來說，無論是在面試或者工作中都可能遇到處理url參數(shù)的問題，使用框架進(jìn)行項目開發(fā)時或許不用，有自帶的獲取參數(shù)方式，但是拋開使用框架來說我們也可以使用原生js方式或者借用第三方庫來實現(xiàn)參數(shù)的獲取并對象化，下面就對具體用法進(jìn)行介紹整理。

方法1:字符串split方法

因為一個url地址是字符串形式的，所以利用split方法將參數(shù)提取出來，該方法比較常用，而且容易理解（對于不太會使用正則的我來說，haha~）

letURL="name=張三age=25sex=男wife=小紅"

functiongetUrlParams(url){

//通過分割獲取后面的參數(shù)字符串

leturlStr=url.split('')[1]

//創(chuàng)建空對象存儲參數(shù)

letobj={};

//再通過將每一個參數(shù)單獨分割出來

letparamsArr=urlStr.split('')

for(leti=0,len=paramsArr.length;ilen;i++){

//再通過=將每一個參數(shù)分割為key:value的形式

letarr=paramsArr[i].split('=')

obj[arr[0]]=arr[1];

returnobj

console.log(getUrlParams(URL))

方法2:利用URLSearchParams方法

在MDN中結(jié)合兩種方法實現(xiàn)參數(shù)的獲?。?.使用newURLSearchParams(url)方法，返回一個URLSearchParams對象，再調(diào)用entries()方法返回一個可迭代對象（Iterator）；2.使用Object.fromEntries(iterable)方法轉(zhuǎn)化為普通對象

letURL="name=Jackage=25sex=menwife=Lucy"

functiongetUrlParams2(url){

leturlStr=url.split('')[1]

consturlSearchParams=newURLSearchParams(urlStr)

constresult=Object.fromEntries(urlSearchParams.entries())

returnresult

console.log(getUrlParams2(URL))

特別的：URLSearchParams方法不僅可以獲取參數(shù)，還可以將參數(shù)對象轉(zhuǎn)為字符串，詳細(xì)用法可查看MDN中的介紹，并且該方法存在瀏覽器兼容性問題。

方法3:利用正則匹配方法

正則匹配功能強(qiáng)大相信很多小伙伴都知道，不僅可以實現(xiàn)在登錄注冊時的賬號、密碼、郵箱、手機(jī)號等等的驗證，還可以非常方便的處理一些字符串（校驗、替換、提取等操作），難點在于對正則使用的熟練度，這里就是通過正則提取字符串中需要的字符

letURL="name=Tomfriend=Jerry"

functiongetUrlParams3(url){

//\w+表示匹配至少一個(數(shù)字、字母及下劃線),[\u4e00-\u9fa5]+表示匹配至少一個中文字符

letpattern=/(\w+|[\u4e00-\u9fa5]+)=(\w+|[\u4e00-\u9fa5]+)/ig;

letresult={};

url.replace(pattern,($,$1,$2)={

result[$1]=$2;

returnresult

console.log(getUrlParams3(URL))

方法4:使用第三方庫qs

使用第三方庫qs也可以實現(xiàn)url中參數(shù)字符的提取，還能實現(xiàn)將參數(shù)對象轉(zhuǎn)為url參數(shù)形式，需要注意的是瀏覽器cdn方式引入時是默認(rèn)添加到全局對象window的Qs屬性上的

scriptsrc="/ajax/libs/qs/6.10.3/qs.min.js"/script

script

letURL="product='iPhone13Pro'price=￥9999.00"

functiongetUrlParams4(url){

//引入qs庫時會默認(rèn)掛在到全局window的Qs屬性上

//console.log(window)

leturlStr=url.split('')[1]

letresult=Qs.parse(urlStr)

//拼接額外參數(shù)

letotherParams={

num:50,

size:6.1

letstr=Qs.stringify(other