快捷導(dǎo)航

JavaScript獲取URL參數(shù)的四種方法總結(jié)

更新時(shí)間：2024年01月23日 08:23:28 作者：清風(fēng)細(xì)雨_林木木

在前端開發(fā)過程中難免會遇到處理url參數(shù)的問題,這篇文章主要給大家總結(jié)介紹了關(guān)于JavaScript獲取URL參數(shù)的四種方法,文中通過代碼介紹的非常詳細(xì),需要的朋友可以參考下

1.字符串 split 方法（推薦）

let URL = "http://www.baidu.com?name=張三&age=25&sex=男&wife=小紅"

function getUrlParams(url) {
    // 通過 ? 分割獲取后面的參數(shù)字符串
    let urlStr = url.split('?')[1]
    // 創(chuàng)建空對象存儲參數(shù)
	let obj = {};
    // 再通過 & 將每一個(gè)參數(shù)單獨(dú)分割出來
	let paramsArr = urlStr.split('&')
	for(let i = 0,len = paramsArr.length;i < len;i++){
        // 再通過 = 將每一個(gè)參數(shù)分割為 key:value 的形式
		let arr = paramsArr[i].split('=')
		obj[arr[0]] = arr[1];
	}
	return obj
}
console.log(getUrlParams(URL))

2.利用 URLSearchParams 方法

在 MDN（MDN是一個(gè)為所有的學(xué)習(xí)者從初級到高級的全面、定期更新的Web開發(fā)技術(shù)指南網(wǎng)站）中結(jié)合兩種方法實(shí)現(xiàn)參數(shù)的獲取：

使用 new URLSearchParams(url) 方法，返回一個(gè) URLSearchParams 對象，再調(diào)用 entries() 方法返回一個(gè)可迭代對象（Iterator）；
使用 Object.fromEntries(iterable) 方法轉(zhuǎn)化為普通對象

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

備注：vue中使用一般會報(bào)錯(cuò)Object.fromEntries is not a function electron-vue

需要加裝插件

npm i polyfill-object.fromentries

引入

import 'polyfill-object.fromentries'

3.利用正則匹配方法

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.使用第三方庫 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 庫時(shí)會默認(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>