获取URL参数：split方法、URLSearchParams方法示例

在JavaScript中，可以使用多种方法来获取URL参数，其中常用的方法有split()和URLSearchParams()。

1. 使用split()方法获取URL参数：

split()方法将字符串分割成数组。可以使用split()方法将URL分割成协议、主机、路径和查询字符串等部分。然后可以通过获取数组中的元素来获取URL参数。

示例代码：

// 获取URL参数
function getURLParams(url) {// 解析URLvar parser = document.createElement('a');parser.href = url;// 获取查询字符串var queryString = parser.search.substring(1);// 分割查询字符串var parameters = queryString.split('&');var params = {};// 遍历参数数组for (var i = 0; i < parameters.length; i++) {var parameter = parameters[i].split('=');var name = decodeURIComponent(parameter[0]);var value = decodeURIComponent(parameter[1]);// 存储参数params[name] = value;}return params;
}// 示例URL
var url = 'https://www.example.com/?name=John&age=20';// 获取URL参数
var params = getURLParams(url);// 输出参数
console.log(params.name); // John
console.log(params.age); // 20

1. 使用URLSearchParams()方法获取URL参数：

URLSearchParams()是一个内置类，用于解析和处理URL查询字符串。它提供了一组方法来获取、添加、删除和迭代URL参数。

示例代码：

// 获取URL参数
function getURLParams(url) {// 解析URLvar parser = new URL(url);// 获取URLSearchParams对象var searchParams = parser.searchParams;// 创建参数对象var params = {};// 遍历URL参数for (var param of searchParams) {var name = param[0];var value = param[1];// 存储参数params[name] = value;}return params;
}// 示例URL
var url = 'https://www.example.com/?name=John&age=20';// 获取URL参数
var params = getURLParams(url);// 输出参数
console.log(params.name); // John
console.log(params.age); // 20

总结： 使用split()方法和URLSearchParams()方法都可以很方便地获取URL参数。split()方法比较适合简单的情况，而URLSearchParams()方法提供了更多的功能，适用于复杂的URL参数解析和处理。

🐱 个人主页：SHOW科技，公众号：SHOW科技
🙋‍♂️ 作者简介：2020参加工作，专注于前端各领域技术，共同学习共同进步，一起加油呀！
💫优质专栏：前端主流技术分享
📢 资料领取：前端进阶资料可以找我免费领取
🔥 摸鱼学习交流：我们的宗旨是在「工作中摸鱼，摸鱼中进步」，期待大佬一起来摸鱼！
————————————————
版权声明：本文为CSDN博主「SHOW科技」的原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接及本声明。
————————————————