前言

对于前端来说，无论是在面试或者工作中都可能遇到处理 url 参数的问题，使用框架进行项目开发时或许不用，有自带的获取参数方式，但是抛开使用框架来说我们也可以使用原生 js 方式或者借用第三方库来实现参数的获取并对象化，下面就对具体用法进行介绍整理。

方法1: 字符串 split 方法

因为一个 url 地址是字符串形式的，所以利用 split 方法将参数提取出来，该方法比较常用，而且容易理解（对于不太会使用正则的我来说，haha~）

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 中结合两种方法实现参数的获取：1. 使用 new urlsearchparams(url) 方法，返回一个 urlsearchparams 对象，再调用 entries() 方法返回一个可迭代对象（iterator）；2. 使用 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 方式引入时是默认添加到全局对象 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 库时会默认挂在到全局 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>
    

总结:

声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！