快捷導(dǎo)航

前端JS獲取URL參數(shù)的4種方法總結(jié)

更新時(shí)間：2022年04月05日 09:29:41 作者：黑夜丶vn

通過(guò)url傳遞參數(shù)是我們?cè)陂_(kāi)發(fā)中經(jīng)常用到的一種傳參方法,下面這篇文章主要給大家介紹了關(guān)于前端JS獲取URL參數(shù)的4種方法,文中通過(guò)示例代碼介紹的非常詳細(xì),需要的朋友可以參考下

前言

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

方法1: 字符串 split 方法

因?yàn)橐粋€(gè) url 地址是字符串形式的，所以利用 split 方法將參數(shù)提取出來(lái)，該方法比較常用，而且容易理解（對(duì)于不太會(huì)使用正則的我來(lái)說(shuō)，haha~）

let URL = "http://www.baidu.com?name=張三&age=25&sex=男&wife=小紅"
function getUrlParams(url) {
    // 通過(guò) ? 分割獲取后面的參數(shù)字符串
    let urlStr = url.split('?')[1]
    // 創(chuàng)建空對(duì)象存儲(chǔ)參數(shù)
	let obj = {};
    // 再通過(guò) & 將每一個(gè)參數(shù)單獨(dú)分割出來(lái)
	let paramsArr = urlStr.split('&')
	for(let i = 0,len = paramsArr.length;i < len;i++){
        // 再通過(guò) = 將每一個(gè)參數(shù)分割為 key:value 的形式
		let arr = paramsArr[i].split('=')
		obj[arr[0]] = arr[1];
	}
	return obj
}
console.log(getUrlParams(URL))

方法2: 利用 URLSearchParams 方法

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

let URL = "http://www.baidu.com?name=Jack&age=25&sex=men&wife=Lucy"
function getUrlParams2(url) {
	let urlStr = url.split('?')[1]
	const urlSearchParams = new URLSearchParams(urlStr)
	const result = Object.fromEntries(urlSearchParams.entries())
	return result
}
console.log(getUrlParams2(URL))

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

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

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

let URL = "http://www.baidu.com?name=Tom&friend=Jerry"
function getUrlParams3(url){
	// \w+ 表示匹配至少一個(gè)(數(shù)字、字母及下劃線), [\u4e00-\u9fa5]+ 表示匹配至少一個(gè)中文字符
	let pattern = /(\w+|[\u4e00-\u9fa5]+)=(\w+|[\u4e00-\u9fa5]+)/ig;
	let result = {};
	url.replace(pattern, ($, $1, $2)=>{
		result[$1] = $2;
	})
	return result
}
console.log(getUrlParams3(URL))

方法4: 使用第三方庫(kù) qs

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

<script src="https://cdn.bootcdn.net/ajax/libs/qs/6.10.3/qs.min.js"></script>
<script>
let URL = "http://www.baidu.com?product='iPhone 13 Pro'&price=￥9999.00"
function getUrlParams4(url){
	// 引入 qs 庫(kù)時(shí)會(huì)默認(rèn)掛在到全局 window 的 Qs 屬性上
	// console.log(window)
	let urlStr = url.split('?')[1]
	let result = Qs.parse(urlStr)
	// 拼接額外參數(shù)
	let otherParams = {
		num:50,
		size:6.1
	}
	let str = Qs.stringify(otherParams)
	let newUrl = url + str
	return {result,newUrl}
}
console.log(getUrlParams4(URL))
</script>