在 JavaScript 中读取 URL 参数数据

在 Web 开发中，经常需要从 URL 中获取参数数据，然后根据参数来进行不同的操作。在 JavaScript 中，可以通过以下方法来读取 URL 参数数据。

方法一：使用 window.location.search

在 JavaScript 中，可以通过 window 对象的 location 属性来获取当前 URL 的信息，包括 URL 参数。URL 参数的位置在 URL 中的第一个问号(?)后面，格式为 key=value，多个参数之间使用 & 符号分隔。

下面是通过 window.location.search 来获取 URL 参数的代码片段：

const query = window.location.search;

// 如果含有多个参数，可以使用 URLSearchParams 进行解析
const params = new URLSearchParams(query);
const id = params.get('id');
const name = params.get('name');

上面的代码将 URL 参数存储到 query 变量中，然后使用 URLSearchParams 对象解析参数。URLSearchParams 对象是一个新的 API，用于解析和操作 URL 查询字符串。通过调用其 get 方法，可以获取 URL 参数的值。

方法二：使用正则表达式

除了使用 URLSearchParams 工具类，我们还可以使用正则表达式来获取 URL 参数。以下是获取 URL 参数的代码片段：

const query = window.location.search;

// 正则表达式来匹配 key=value 格式
const reg = /(?:\?|&)(\w+)=(\w+)(?:&|$)/g;

let match;
let params = {};

while ((match = reg.exec(query)) !== null) {
  params[match[1]] = decodeURIComponent(match[2]);
}

const id = params['id'];
const name = params['name'];

上面的代码使用了正则表达式来匹配 URL 参数中的 key=value 格式，然后将匹配到的值存储到一个对象中。其中，(?:?|&) 表示匹配 ? 或 & 符号，(\w+) 表示匹配 key 值，(\w+) 表示匹配 value 值，(?:&|$) 表示匹配 & 符号或 URL 的结束标记 $。

总结

在 JavaScript 中，读取 URL 参数数据有多种方法，其中使用 window.location.search 和正则表达式是常用的方法之一。在实际开发中，可以根据项目的需求和开发习惯来选择适合自己的方式来获取 URL 参数数据。