前端JS获取URL参数的4种方法总结

前言

在前端开发领域，无论是面试考核还是实际项目工作中，处理URL参数都是常见需求。在使用现代框架进行开发时，通常框架会提供内置的参数获取机制。然而，若脱离框架环境，开发者仍需掌握使用原生JavaScript或借助第三方库来实现参数提取并将其转换为对象的方法。下文将对这几种具体实现方式进行详细梳理与介绍。

方法1: 字符串 split 方法

由于URL地址本质上是字符串形式，因此可以利用字符串的split方法将参数提取出来。这种方法应用广泛且逻辑直观，对于不熟悉正则表达式的开发者而言，是一种较为友好的选择。

let URL = "http://www.baidu.com?name=张三&age=25&sex=男&wife=小红"
function getUrlParams(url) {
    // 通过 ? 分割获取后面的参数字符串
    let urlStr = url.split('?')[1]
    // 创建空对象存储参数
	let obj = {};
    // 再通过 & 将每一个参数单独分割出来
	let paramsArr = urlStr.split('&')
	for(let i = 0,len = paramsArr.length;i < len;i++){
        // 再通过 = 将每一个参数分割为 key:value 的形式
		let arr = paramsArr[i].split('=')
		obj[arr[0]] = arr[1];
	}
	return obj
}
console.log(getUrlParams(URL))

方法2: 利用 URLSearchParams 方法

参考MDN文档，可以通过组合两种API来实现参数获取：首先使用 new URLSearchParams(url) 方法创建一个URLSearchParams对象，随后调用该对象的 entries() 方法返回一个可迭代对象（Iterator）；或者使用 Object.fromEntries(iterable) 方法直接将迭代器转换为普通对象。

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方法不仅支持参数获取，还能将参数对象转换回字符串形式，具体用法可查阅MDN官方文档。此外，该方法在不同浏览器中的兼容性存在差异，使用时需留意兼容性问题。

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

正则表达式功能强大，广泛应用于登录注册时的账号、密码、邮箱、手机号等验证场景，同时也非常适合处理字符串的校验、替换和提取操作。其难点在于对正则表达式的熟练运用，此处即通过正则表达式从字符串中提取所需字符。

let URL = "http://www.baidu.com?name=Tom&friend=Jerry"
function getUrlParams3(url){
	// \w+ 表示匹配至少一个(数字、字母及下划线), [\u4e00-\u9fa5]+ 表示匹配至少一个中文字符
	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

引入第三方库qs同样可以实现URL参数字符串的提取，并且该库还支持将参数对象转换回URL参数形式。需要注意的是，当通过浏览器CDN方式引入该库时，它默认会将Qs对象挂载到全局window对象上。

<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 库时会默认挂在到全局 window 的 Qs 属性上
	// console.log(window)
	let urlStr = url.split('?')[1]
	let result = Qs.parse(urlStr)
	// 拼接额外参数
	let otherParams = {
		num:50,
		size:6.1
	}
	let str = Qs.stringify(otherParams)
	let newUrl = url + str
	return {result,newUrl}
}
console.log(getUrlParams4(URL))
</script>

总结:

至此，关于前端JS获取URL参数的四种方法介绍完毕。如需了解更多前端获取URL参数的相关内容，欢迎搜索本站过往文章或继续浏览后续文章。感谢大家的支持！

前端JS获取URL参数的4种方法总结

前言

方法1: 字符串 split 方法

方法2: 利用 URLSearchParams 方法

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

方法4: 使用第三方库 qs

总结:

实用工具推荐