JS 获取链接中的参数|极客笔记

JS 获取链接中的参数

在前端开发中，经常会遇到需要从URL中获取参数的需求。比如在一个链接中包含了一些参数，我们需要从链接中提取这些参数进行相应的操作。本文将介绍如何使用JavaScript来获取链接中的参数。

方法一：使用URLSearchParams对象

URLSearchParams 对象是一个内置对象，用于解析URL查询字符串。我们可以使用它来获取链接中的参数。

示例：

// 创建一个包含参数的URL
let url = new URL("https://www.example.com?name=Alice&age=30");

// 使用URLSearchParams对象获取参数
let params = new URLSearchParams(url.search);

// 获取特定的参数值
let name = params.get("name");
let age = params.get("age");

console.log(name); // 输出 "Alice"
console.log(age); // 输出 "30"

运行结果：

Alice
30

方法二：使用正则表达式

如果不想依赖内置的 URLSearchParams 对象，我们也可以使用正则表达式来提取链接中的参数。

示例：

// 获取包含参数的URL
let url = "https://www.example.com?name=Bob&age=25";

// 创建一个正则表达式来匹配参数
let regex = /[?&]([^=#]+)=([^&#]*)/g;
let params = {};
let match;

// 遍历匹配
while (match = regex.exec(url)) {
  params[match[1]] = match[2];
}

console.log(params["name"]); // 输出 "Bob"
console.log(params["age"]); // 输出 "25"

运行结果：

Bob
25

方法三：手动解析URL

如果不想使用正则表达式，我们还可以手动解析URL来获取参数。

示例：

// 获取包含参数的URL
let url = "https://www.example.com?name=Charlie&age=20";

// 解析URL
let startIndex = url.indexOf("?") + 1;
let paramsStr = url.slice(startIndex);
let paramsArray = paramsStr.split("&");
let params = {};

// 遍历参数数组
paramsArray.forEach(param => {
  let [key, value] = param.split("=");
  params[key] = value;
});

console.log(params["name"]); // 输出 "Charlie"
console.log(params["age"]); // 输出 "20"

运行结果：