如何在 JavaScript 中获取查询参数

在 web 开发中，查询参数是我们经常需要获取的。JavaScript 中有几种方式可以获取当前 url 中的查询参数，本文将为你介绍三种不同的获取方式。

1. 使用 URLSearchParams

URLSearchParams 是一个构造函数，可以用来解析和操作 url 的查询参数部分。它可以通过传入一个 url 或者直接传入查询参数字符串来生成一个 URLSearchParams 对象。以下是一个获取 url 查询参数的示例代码：

const params = new URLSearchParams(window.location.search);
const foo = params.get('foo');
console.log(foo);

其中，window.location.search 会返回当前 url 的查询参数部分，生成一个 URLSearchParams 对象之后，我们可以使用 get 方法获取指定参数名的参数值。

2. 使用正则表达式

正则表达式也是获取 url 查询参数的一种常见方式，以下是一个使用正则表达式获取 url 查询参数的示例代码：

const url = window.location.search;
const reg = /(?:[?&])([^=]+)(?:=)([^&]+)/g;
let match = null;
const queryParams = {};
while ((match = reg.exec(url))) {
  queryParams[match[1]] = match[2];
}
console.log(queryParams);

通过正则表达式匹配 url 查询参数，将匹配到的参数名和参数值保存到一个对象中。需要注意的是，由于查询参数之间是通过 & 字符进行分隔的，因此上面的正则表达式中会匹配 & 字符，并且通过 (?: .. ) 这种非捕获分组的方式忽略掉它们。

3. 使用 window.location.search

我们也可以直接使用 window.location.search 来获取当前 url 中的查询参数，以下是一个使用该方式的示例代码：

const url = window.location.search;
const searchParams = url.substr(1).split('&').reduce((params, str) => {
  const [key, val] = str.split('=');
  params[key] = val ? decodeURIComponent(val.replace(/\+/g, ' ')) : '';
  return params;
}, {});
console.log(searchParams);

这个示例中，我们首先使用 substr 方法去掉查询参数开头的 ?，然后使用 split 方法将整个查询参数字符串按 & 字符进行分割，并将处理后的参数以键值对的形式保存到一个对象中。

那么如何处理参数值中包含的特殊字符呢？这里使用了 decodeURIComponent 函数将参数值字符串中的 %20 字符替换成空格。

结论

这篇文章为你介绍了三种不同的获取 url 查询参数的方式。使用 URLSearchParams 可以更简洁地获取查询参数，使用正则表达式则可以更灵活地匹配查询参数格式，而直接使用 window.location.search 可以减少代码量。在实际开发中，可以根据具体情况选择最适合的方式。