JavaScript 获取 URL 中参数值的详解

在开发 Web 应用时，我们经常需要从 URL 中提取参数值，比如获取用户的查询条件、跟踪统计信息等。本文将详细介绍几种在 JavaScript 中获取 URL 参数值的方法，包括现代浏览器支持的 URLSearchParams、正则表达式解析以及自定义函数解析方案，并讨论各自的优缺点及适用场景。

---

1. 了解 URL 参数

一个 URL 的参数部分通常位于问号（?）之后，例如：

https://example.com/page?name=alice&age=25

在上面的 URL 中，name 和 age 都是参数，值分别为 alice 和 25。获取这些参数在前端开发中非常常见。

---

2. 使用 URLSearchParams 获取参数值

2.1 什么是 URLSearchParams？

ES6 引入了 URLSearchParams 接口，用于方便地解析和操作 URL 查询字符串。该接口提供了一系列方法，例如 get()、has()、append() 等，让我们能够快速获取和操作参数。

2.2 示例代码

// 假设当前 URL 为：https://example.com/page?name=alice&age=25

// 获取查询字符串（问号后面的部分）
const queryString = window.location.search;

// 创建 URLSearchParams 实例
const params = new URLSearchParams(queryString);

// 获取单个参数的值
const name = params.get('name'); // "alice"
const age = params.get('age');   // "25"

console.log('Name:', name);
console.log('Age:', age);

2.3 优缺点

• 优点：
  • 简洁直观，代码可读性高。
  • 提供了丰富的方法来操作参数。
• 缺点：
  • IE 不支持该接口（可通过 polyfill 解决）。

---

3. 使用正则表达式获取参数值

对于不支持 URLSearchParams 的浏览器或特殊需求，可以使用正则表达式来提取 URL 参数值。

3.1 示例代码

function getQueryParam(param) {
  const url = window.location.href;
  // 构造正则表达式，匹配 ? 或 & 后面跟随的参数名称和其值
  const regex = new RegExp('[?&]' + param + '=([^&#]*)', 'i');
  const result = regex.exec(url);
  return result ? decodeURIComponent(result[1]) : null;
}

// 假设 URL 为：https://example.com/page?name=alice&age=25
console.log(getQueryParam('name')); // "alice"
console.log(getQueryParam('age'));  // "25"

3.2 分析

• 该方法通过正则表达式匹配参数名和参数值。
• 使用 decodeURIComponent 解码 URL 编码字符。
• 可在不支持 URLSearchParams 的环境下使用。

---

4. 自定义解析函数

如果需要更加灵活地处理 URL 参数（比如支持数组参数、重复参数等），可以编写自定义函数来解析查询字符串。

4.1 示例代码

function parseQueryString(queryString) {
  const params = {};
  // 移除问号
  queryString = queryString.replace(/^\?/, '');
  // 分割成键值对数组
  const pairs = queryString.split('&');
  
  pairs.forEach(pair => {
    if (!pair) return;
    const [key, value] = pair.split('=');
    const decodedKey = decodeURIComponent(key);
    const decodedValue = value ? decodeURIComponent(value) : '';
    
    // 如果键已经存在，则将其转换为数组
    if (params[decodedKey]) {
      if (Array.isArray(params[decodedKey])) {
        params[decodedKey].push(decodedValue);
      } else {
        params[decodedKey] = [params[decodedKey], decodedValue];
      }
    } else {
      params[decodedKey] = decodedValue;
    }
  });
  
  return params;
}

// 示例：URL 为：https://example.com/page?name=alice&age=25&hobby=reading&hobby=swimming
const queryString = window.location.search;
const queryParams = parseQueryString(queryString);

console.log(queryParams);
// 输出: { name: "alice", age: "25", hobby: ["reading", "swimming"] }

4.2 分析

• 该函数先去除 URL 中的问号，再以 & 分割所有键值对。
• 每个键值对使用 = 分割，并解码编码后的字符。
• 如果同一个参数出现多次，则将其值转换为数组存储，方便处理多个值的情况。

---

5. 小结与注意事项

• 推荐使用 URLSearchParams：在支持该接口的现代浏览器中，它是获取 URL 参数最简单、最安全的方式。
• 正则表达式方法：适合需要兼容老旧浏览器或特定需求时使用，但代码可读性略低。
• 自定义解析函数：灵活性更高，适用于需要特殊处理（如数组参数）的场景，但需要更多测试以确保兼容性和健壮性。
• 编码与解码：无论哪种方法，都要注意 URL 编码问题，使用 encodeURIComponent 和 decodeURIComponent 进行编码转换。

通过本文，你可以根据项目需求选择最合适的方法来获取 URL 参数值。希望这篇文章能为你在 Web 开发中处理 URL 参数问题提供有用的参考和解决方案！

---