在JavaScript中访问浏览器查询参数的指南

在这篇文章中，我们将介绍如何使用以下方法访问URL中的查询参数

查询参数有时被称为搜索参数，出现在URL的末尾:

https://site.com?param1=value1&param2=value2

在上面的例子中，我们有两个参数被称为param1 和param2 ，其值分别为value1 和value2 。

window.location.search 从问号处给我们提供了URL的位:

?param1=value1&param2=value2

我们可以写一些字符串处理代码来从这个字符串中提取参数值，但有一个更简单的方法，即URLSearchParams :

const params = new URLSearchParams(
  window.location.search
);
const paramValue1 = params.get("param1"); // value1

URLSearchParams 构造函数接收了URL的查询参数部分。返回的对象为我们提供了有用的实用方法来处理查询参数。

get 方法返回传递给它的参数名称的值。如果参数不存在，它返回null :

params.get("param-that-does-not-exist"); // null

我们可以使用has 方法来检查一个参数是否存在:

params.has("param1"); // true
params.has("param-that-does-not-exist"); // false

entries 方法允许我们遍历所有的参数:

for (const [name, value] of params.entries()) {
  console.log(name, value);
}

forEach 方法可能感觉更自然一些，但用于迭代:

params.forEach((value, name) => {
  console.log(value, name);
});

我们也可以更新查询参数:

params.set("param2", "value2-updated");
params.toString(); // ?param1=value1&param2=value2-updated

set 方法并不更新浏览器中的URL。要做到这一点，我们使用history.replaceState:

window.history.replaceState(
  {},
  "",
  `${location.pathname}?${params.toString()}`
);

...或者history.pushState ，如果我们想把它添加到浏览器历史记录中:

window.history.pushState(
  {},
  "",
  `${location.pathname}?${params.toString()}`
);

set 方法也可以用来添加一个新的参数值:

params.set("param3", "value3");
params.toString(); // ?param1=value1&param2=value2-updated&param3=value3

delete 方法可以用来删除一个参数:

params.delete("param3");
params.toString(); // ?param1=value1&param2=value2-updated

URLSearchParams 可以在所有的现代浏览器中使用，但不幸的是，不能在IE中使用。不过有一个pollyfill，我们可以在IE中使用。