JavaScript 从 URL 获取查询参数 - Javascript

在 Web 开发中，我们经常需要从 URL 中获取查询参数（query parameter）以便在后端进行处理或者在前端进行展示。在 JavaScript 中，我们有多种方法可以轻松地获取查询参数。

1. 使用 window.location.search

在 JavaScript 中，我们可以直接使用 window.location.search 来获取 URL 中的查询参数部分。window.location.search 返回值是一个字符串，包含 ? 后的所有内容。

const queryString = window.location.search;

如果我们的 URL 是 https://example.com/?name=john&age=30，那么 queryString 的值就是 ?name=john&age=30。

2. 使用 URLSearchParams

如果我们需要对查询参数进行解析和处理，我们可以使用 URLSearchParams 对象。URLSearchParams 提供了一系列方便的方法，可以让我们轻松地获取、添加、删除和修改查询参数。它已经被现代浏览器完全支持。

const params = new URLSearchParams(window.location.search);

这样我们就可以通过 params.get('name') 的方式来获取查询参数中的值了。如果我们的 URL 是 https://example.com/?name=john&age=30，那么 params.get('name') 就会返回 john。

以下是 URLSearchParams 对象的常用方法：

• get(name)：获取名称为 name 的查询参数值。
• has(name)：检查是否存在名称为 name 的查询参数。
• set(name, value)：将名称为 name 的查询参数设置为 value。
• append(name, value)：将名称为 name 的查询参数添加到现有值的末尾。
• delete(name)：删除名称为 name 的查询参数。

const params = new URLSearchParams(window.location.search);
const name = params.get('name');
const age = params.get('age');

if (params.has('name')) {
  params.set('name', 'jane');
}

params.append('hobby', 'reading');
params.delete('age');

3. 自己解析查询参数

除了使用现成的 API 之外，我们还可以手动解析查询参数。这种方法很简单，只需要将 window.location.search 中的字符串按照 & 和 = 进行分割即可。

function getQueryParams() {
  const queryString = window.location.search;
  const params = {};

  if (queryString) {
    queryString
      .substring(1)
      .split('&')
      .forEach(param => {
        const [key, value] = param.split('=');
        params[key] = value ? decodeURIComponent(value.replace(/\+/g, ' ')) : '';
      });
  }

  return params;
}

const params = getQueryParams();
const name = params['name'];
const age = params['age'];

总结

无论是使用现成的 API 还是自己解析查询参数，JavaScript 都可以轻松地从 URL 中获取查询参数。我们可以根据具体场景选择最适合的方法来获取和处理查询参数。