如何使用 JavaScript 获取 URL 参数

在 JavaScript 中，有几种方法可以获取 URL 中的参数。以下是两种常用的方法：

1. 使用 URLSearchParams (推荐)

URLSearchParams 接口提供了一种简单且强大的方式来处理 URL 的查询字符串。它是现代浏览器中推荐的方法。

function getUrlParam(name) {
  const urlParams = new URLSearchParams(window.location.search);
  return urlParams.get(name);
}

// 示例
const username = getUrlParam('username');
console.log(username); // 如果 URL 是 http://example.com?username=test，则输出 "test"

const category = getUrlParam('category');
console.log(category); // 如果 URL 是 http://example.com?id=123&category=electronics，则输出 "electronics"

优点：

易于使用：提供简洁的 API 来获取、设置、删除和遍历 URL 参数。
兼容性好：现代浏览器都支持。
自动解码：会自动处理 URL 编码的字符，无需手动解码。

2. 使用正则表达式 (传统方法)

如果你需要兼容一些非常老的浏览器，或者对 URL 参数的处理有更复杂的自定义需求，可以使用正则表达式来解析 URL 参数。

function getUrlParamRegex(name) {
  const regex = new RegExp('[?&]' + name + '=([^&#]*)');
  const results = regex.exec(window.location.search);
  return results === null ? '' : decodeURIComponent(results[1].replace(/\+/g, ' '));
}

// 示例
const userId = getUrlParamRegex('userId');
console.log(userId); // 如果 URL 是 http://example.com?userId=456，则输出 "456"

优点：

兼容性广泛：适用于几乎所有浏览器。
灵活性高：可以根据需要编写更复杂的匹配规则。

缺点：

相对复杂：需要对正则表达式有一定的了解。
需要手动解码：获取到的值可能需要使用 decodeURIComponent() 进行解码。

选择哪种方法更好？

在大多数情况下，强烈建议使用 URLSearchParams。它更现代化，更易于理解和使用，并且能更好地处理 URL 编码。只有在需要兼容非常老的浏览器时，才考虑使用正则表达式或其他传统方法。