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

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

letURL="http://www.baidu.com?name=张三&age=25&sex=男&wife=小红"functiongetUrlParams(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（MDN是一个为所有的学习者从初级到高级的全面、定期更新的Web开发技术指南网站）

中结合两种方法实现参数的获取：

1. 使用 new URLSearchParams(url) 方法，返回一个 URLSearchParams 对象，再调用 entries() 方法返回一个可迭代对象（Iterator）；
2. 使用 Object.fromEntries(iterable) 方法转化为普通对象

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

备注：vue中使用一般会报错

Object.fromEntries is not a function electron-vue

需要加装插件

npm i polyfill-object.fromentries

引入

import'polyfill-object.fromentries'

3.利用正则匹配方法

letURL="http://www.baidu.com?name=Tom&friend=Jerry"functiongetUrlParams3(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

<script src="https://cdn.bootcdn.net/ajax/libs/qs/6.10.3/qs.min.js"></script><script>letURL="http://www.baidu.com?product='iPhone 13 Pro'&price=￥9999.00"functiongetUrlParams4(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>