JavaScript获取URL参数的四种方法总结

 更新时间:2024年01月23日 08:23:28   作者:清风细雨_林木木  
在前端开发过程中难免会遇到处理url参数的问题,这篇文章主要给大家总结介绍了关于JavaScript获取URL参数的四种方法,文中通过代码介绍的非常详细,需要的朋友可以参考下

1.字符串 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(MDN是一个为所有的学习者从初级到高级的全面、定期更新的Web开发技术指南网站) 中结合两种方法实现参数的获取:

  • 使用 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))

备注:vue中使用一般会报错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+ 表示匹配至少一个(数字、字母及下划线), [\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>
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>

总结 

到此这篇关于JavaScript获取URL参数的四种方法的文章就介绍到这了,更多相关JS获取URL参数内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!

相关文章

  • 判定对象是否为window的js代码

    判定对象是否为window的js代码

    这是一个非常有趣的题目。我们先从Object.prototype.toString入手,看能否解决它。
    2010-02-02
  • JS调用打印机功能简单示例

    JS调用打印机功能简单示例

    这篇文章主要介绍了JS调用打印机功能的方法,结合完整实例形式分析了javascript打印机功能的相关设置与使用技巧,需要的朋友可以参考下
    2016-11-11
  • JavaScript之RegExp_动力节点Java学院整理

    JavaScript之RegExp_动力节点Java学院整理

    正则表达式是一种用来匹配字符串的强有力的武器。它的设计思想是用一种描述性的语言来给字符串定义一个规则,凡是符合规则的字符串,我们就认为它“匹配”了,否则,该字符串就是不合法的
    2017-06-06
  • layui: layer.open加载窗体时出现遮罩层的解决方法

    layui: layer.open加载窗体时出现遮罩层的解决方法

    今天小编就为大家分享一篇layui: layer.open加载窗体时出现遮罩层的解决方法,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2019-09-09
  • Three.js PBR物理渲染属性及使用介绍

    Three.js PBR物理渲染属性及使用介绍

    这篇文章主要为大家介绍了Three.js PBR物理渲染属性及使用介绍,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2023-04-04
  • 一文详解JavaScript中的'BigInt'用法

    一文详解JavaScript中的'BigInt'用法

    BigInt是ES2020中引入的新的原始数据类型。它允许程序员使用更大的整数值,以匹配需要处理的数据集。在这篇博客中,我们将探讨BigInt的用法和它与其他相似方法的区别,感兴趣的可以了解一下
    2023-04-04
  • 用函数式编程技术编写优美的 JavaScript_ibm

    用函数式编程技术编写优美的 JavaScript_ibm

    函数式编程语言在学术领域已经存在相当长一段时间了,但是从历史上看,它们没有丰富的工具和库可供使用。随着 .NET 平台上的 Haskell 的出现,函数式编程变得更加流行。一些传统的编程语言,例如 C++ 和 JavaScript,引入了由函数式编程提供的一些构造和特性。在许多情况下,JavaScript 的重复代码导致了一些拙劣的编码。如果使用函数式编程,就可以避免这些问题。此外,可以利用函数式编程风格编写更加优美的回调。
    2008-05-05
  • 一次微信小程序内地图的使用实战记录

    一次微信小程序内地图的使用实战记录

    这篇文章主要给大家介绍了关于一次微信小程序内地图使用的相关资料,文中通过示例代码介绍的非常详细,对大家学习或者使用微信小程序具有一定的参考学习价值,需要的朋友们下面来一起学习学习吧
    2019-09-09
  • js前端解决跨域的八种实现方案

    js前端解决跨域的八种实现方案

    这篇文章主要介绍了js前端解决跨域的八种实现方案,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2021-04-04
  • 详解es6超好用的语法糖Decorator

    详解es6超好用的语法糖Decorator

    这篇文章主要介绍了详解es6超好用的语法糖Decorator,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2018-08-08

最新评论