如何使用 JavaScript 获取 URL 参数

URL 参数（也称为查询字符串）是 Web 开发的重要组成部分，允许您在页面之间传递数据或从客户端传递到服务器。无论您是在构建搜索功能、处理表单提交还是跟踪用户偏好，了解如何提取和使用这些参数都是必不可少的。

在本文中，我将向您展示使用 JavaScript 获取 URL 参数的最有效方法，从现代方法到传统解决方案。

理解 URL 参数

URL 参数出现在 URL 中问号（?）之后，格式为键值对：

https://example.com/page?name=john&id=123

在此示例中，有两个参数：name 的值为 john，id 的值为 123。

现代方法：URLSearchParams

在现代浏览器中处理 URL 参数最简单、最可靠的方法是使用 URLSearchParams 接口。

基本用法

// 假设 URL: https://example.com/page?product=shirt&color=blue&size=m

// 获取查询字符串
const queryString = window.location.search;

// 解析查询字符串
const urlParams = new URLSearchParams(queryString);

// 获取特定参数值
const product = urlParams.get('product'); // "shirt"
const color = urlParams.get('color');     // "blue"

检查参数是否存在

// 检查参数是否存在
if (urlParams.has('product')) {
  // 参数存在
  console.log('Product 参数存在');
}

处理多个值

如果参数在 URL 中出现多次，您可以检索所有值：

// URL: https://example.com/page?tag=javascript&tag=frontend

// 获取参数的所有值
const tags = urlParams.getAll('tag'); // ["javascript", "frontend"]

遍历参数

URLSearchParams 提供迭代器方法来处理所有参数：

// 遍历所有参数键
for (const key of urlParams.keys()) {
  console.log(key);
}

// 遍历所有参数值
for (const value of urlParams.values()) {
  console.log(value);
}

// 遍历所有参数条目（键值对）
for (const [key, value] of urlParams.entries()) {
  console.log(`${key}: ${value}`);
}

传统方法：自定义函数

对于不支持 URLSearchParams 的较旧浏览器，您可以创建自定义函数：

function getUrlParam(param) {
  const queryString = window.location.search.substring(1);
  const urlParams = queryString.split('&');
  
  for (let i = 0; i < urlParams.length; i++) {
    const paramPair = urlParams[i].split('=');
    if (paramPair[0] === param) {
      return decodeURIComponent(paramPair[1] || "");
    }
  }
  return null;
}

// 使用方法
const productValue = getUrlParam('product');

处理常见边缘情况

编码字符

URL 参数通常包含编码字符。例如，空格被编码为 %20：

// URL: https://example.com/search?query=web%20development

const query = urlParams.get('query');
console.log(query); // "web development" (自动解码)

使用自定义函数时，确保使用 decodeURIComponent() 正确处理这些编码字符。

缺失参数

在使用参数之前，始终检查参数是否存在：

const size = urlParams.has('size') ? urlParams.get('size') : 'default';

空参数

参数可以存在但没有值：

// URL: https://example.com/page?newsletter=&theme=dark

const newsletter = urlParams.get('newsletter'); // "" (空字符串)
const hasNewsletter = urlParams.has('newsletter'); // true

完整示例：获取所有 URL 参数

以下是一个获取所有 URL 参数作为对象的综合函数：

function getAllUrlParams() {
  const params = {};
  const queryString = window.location.search.substring(1);
  
  if (queryString) {
    const pairs = queryString.split('&');
    
    for (const pair of pairs) {
      const [key, value] = pair.split('=');
      
      // 如果参数没有值，设置为 true
      if (typeof value === 'undefined') {
        params[key] = true;
      } else {
        // 如果我们已经有这个参数，转换为数组
        if (params[key]) {
          if (!Array.isArray(params[key])) {
            params[key] = [params[key]];
          }
          params[key].push(decodeURIComponent(value));
        } else {
          params[key] = decodeURIComponent(value);
        }
      }
    }
  }
  
  return params;
}

浏览器兼容性

URLSearchParams 在所有现代浏览器中都受支持，包括：

• Chrome 49+
• Firefox 44+
• Safari 10.1+
• Edge 17+

对于像 Internet Explorer 这样的较旧浏览器，您需要使用 polyfill 或自定义函数方法。

性能考虑

对于大多数应用程序，不同方法之间的性能差异可以忽略不计。但是：

1. URLSearchParams 经过优化并由浏览器供应商维护
2. 自定义函数可以根据您的特定需求进行定制
3. 如果您只获取单个参数，简单的正则表达式可能更快

安全注意事项

请记住，URL 参数在浏览器的地址栏中是可见的，对于敏感信息来说不安全。在应用程序中使用参数值之前，始终验证和清理它们。

结论

URLSearchParams 接口提供了一种在 JavaScript 中处理 URL 参数的清洁、标准化方法。对于大多数现代 Web 应用程序，这是推荐的方法。对于传统浏览器支持，自定义函数可以用稍多的代码提供相同的功能。

通过了解如何有效地提取和使用 URL 参数，您可以构建更动态和交互式的 Web 应用程序。

常见问题