URL 参数处理指南：用 URLSearchParams 和 URL 征服地址栏

2023-12-29 15:38:46

前言：

网址，也称为统一资源定位器 (URL)，是互联网世界中导航和标识的基石。它们不仅指示网页的位置，还承载着大量信息，包括查询参数。这些参数是附加在 URL 末尾的键值对，用于传递额外信息，从而定制和过滤网页内容。

要有效地处理和解析这些查询参数，我们需要借助两个强大的 API：URLSearchParams 和 URL。本文将为您提供分步指南，让您掌握这些工具，成为 URL 操纵的大师。

一、认识 URLSearchParams

URLSearchParams 对象提供了一种简单的方法来管理查询参数。我们可以通过以下方式创建和使用它：

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

在该示例中，params 是一个 URLSearchParams 对象，它包含了当前页面的查询参数。

我们可以使用以下方法操作 URLSearchParams 对象：

get(name)： 获取指定名称的参数值。
has(name)： 检查对象是否包含指定名称的参数。
set(name, value)： 设置指定名称的参数值。
delete(name)： 删除指定名称的参数。
forEach(callback)： 遍历对象中的每个键值对。
keys()： 返回对象中所有参数名称的迭代器。
values()： 返回对象中所有参数值的迭代器。
entries()： 返回对象中所有键值对的迭代器。

示例：

const params = new URLSearchParams(window.location.search);
const name = params.get("name");
if (name) {
  console.log(`Welcome, ${name}!`);
}

二、深入了解 URL API

URL 对象允许我们操纵和解析整个 URL，包括协议、主机名、端口和路径。我们可以通过以下方式创建和使用它：

const url = new URL(window.location.href);

在该示例中，url 是一个 URL 对象，它包含了当前页面的完整 URL。

我们可以使用以下属性和方法操作 URL 对象：

href： 整个 URL 字符串。
protocol： 协议（例如，"https:"）。
host： 主机名（例如，"example.com"）。
port： 端口号（例如，80）。
pathname： 路径（例如，"/index.html"）。
search： 查询字符串（例如，"?name=John"）。
hash： 锚点（例如，"#section-1"）。
toString()： 返回对象的完整 URL 字符串。

示例：

const url = new URL(window.location.href);
const protocol = url.protocol;
const host = url.host;
console.log(`The protocol is ${protocol} and the host is ${host}`);

三、合并 URLSearchParams 和 URL

URLSearchParams 和 URL 对象可以协同工作，提供完整的 URL 操作解决方案。我们可以将查询参数添加到现有 URL，或者从 URL 中提取查询参数：

// 从 URL 中提取查询参数
const url = new URL(window.location.href);
const params = new URLSearchParams(url.search);

// 添加查询参数
url.search = params.toString() + "&newParam=newValue";

// 将更新后的 URL 转换为字符串
const updatedUrl = url.toString();

示例：

// 从当前 URL 中提取 "name" 参数值
const url = new URL(window.location.href);
const params = new URLSearchParams(url.search);
const name = params.get("name");

// 如果 "name" 参数存在，在 URL 中添加新的 "age" 参数
if (name) {
  url.search += "&age=30";

  // 将更新后的 URL 转换为字符串
  const updatedUrl = url.toString();
}