获取 URL 查询参数 JS

在 Web 开发中，有时我们需要从 URL 中获取查询参数，以便在页面中进行一些逻辑操作。在 JavaScript 中，可以通过几种方法来获取 URL 查询参数。

使用 URLSearchParams 对象

ES6 引入了一个新对象 URLSearchParams，用于处理 URL 查询参数。你可以使用它的 get 方法来获取某个查询参数的值，或者使用 getAll 方法来获取所有同名的查询参数的值。

const params = new URLSearchParams(window.location.search);
const foo = params.get('foo');
const bars = params.getAll('bar');

上述代码中，window.location.search 返回 URL 中的查询参数部分，如果 URL 中没有查询参数，则返回空字符串。然后我们将其传给 URLSearchParams 构造函数来创建一个新的 URLSearchParams 对象。接下来使用 get 方法获取 foo 的值，使用 getAll 方法获取所有名为 bar 的查询参数的值。

使用自定义函数

在 ES6 之前，我们可以使用自定义函数来获取 URL 查询参数。这种方式需要使用正则表达式来解析查询参数，然后将它们存储到一个对象中。

function getUrlQueryParams(url) {
  const params = {};
  const regex = /[?&]([^=#]+)=([^&#]*)/g;
  let match;
  while ((match = regex.exec(url))) {
    params[match[1]] = decodeURIComponent(match[2]);
  }
  return params;
}

const queryParams = getUrlQueryParams(window.location.search);
const foo = queryParams.foo;
const bars = queryParams.bars;

上述代码中，getUrlQueryParams 函数接收一个 URL 字符串作为参数，并返回一个包含查询参数的对象。该函数使用了一个正则表达式，遍历查询参数的键值对并将其存储到一个对象中。接着我们就可以使用对象的属性来获取查询参数的值。

性能比较

虽然使用 URLSearchParams 对象会更加简单和直观，但是在一些旧浏览器中可能不被支持。而自定义函数方式在兼容性上则更好，但是相对来说会稍微慢一些。因此，我们需要根据实际情况来选择使用哪种方式获取 URL 查询参数。

总之，获取 URL 查询参数是一个非常常见和基础的操作，一个好的程序员应该掌握多种方式来进行查询参数的获取，以便在需要的时候更加灵活地进行操作。