如何使用 JavaScript 获取 URL 参数？

在网页开发中，获取 URL 参数是一项基本技能。JavaScript 提供了多种方法来获取 URL 参数。本文将介绍三种最常见的方法。

方法一：使用 window.location.search

每个网页都有一个 location 对象，表示当前页面的 URL 信息。其中，search 属性返回 URL 中的查询部分（即问号后面的部分），可以用来获取 URL 参数。

// 获取当前网页的 URL 参数
const params = new URLSearchParams(window.location.search);
// 获取 name 参数的值
const name = params.get("name");

上面代码中，我们首先用 URLSearchParams 对象解析 URL 中的查询部分，然后通过 get 方法获取特定参数的值。如果 URL 中没有该参数，则返回 null。

注意，这种方法只适用于查询部分参数，不能用于哈希部分参数。

方法二：使用正则表达式解析 URL

另一种获取 URL 参数的方法是使用正则表达式解析 URL。这种方法不需要依赖任何库，也没有兼容性问题。

// 使用正则表达式获取 URL 参数
function getQueryParam(name) {
  let reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)", "i");
  let r = window.location.search.substr(1).match(reg);
  if (r != null) {
    return unescape(r[2]);
  }
  return null;
}
// 获取 name 参数的值
const name = getQueryParam("name");

上面代码中，我们首先使用正则表达式解析查询部分（substr(1) 表示去掉问号），然后匹配特定参数的值。如果 URL 中没有该参数，则返回 null。

方法三：使用第三方库解析 URL

除了自己写解析代码，我们也可以使用第三方库来解析 URL 参数。最常用的库是 qs。

import qs from 'qs';
// 获取当前网页的 URL 参数
const params = qs.parse(window.location.search, { ignoreQueryPrefix: true });
// 获取 name 参数的值
const name = params.name;

上面代码中，我们使用 qs.parse 方法解析查询部分（ignoreQueryPrefix 表示忽略问号），然后得到一个对象类型的参数集合。使用对象属性获取特定参数的值即可。

结论

以上三种方法都可以用来获取 URL 参数，具体使用哪种需要根据自己的业务场景来决定。方法一是最简单的，但有兼容性问题；方法二没有兼容性问题，但需要自己写解析代码；方法三需要引入第三方库，但代码量最小，用起来最方便。