从浏览器到 Web：URL 的拆解之旅**

**文章

在数字世界中，URL（统一资源定位符）扮演着至关重要的角色，它是互联网基础设施的基石。而浏览器为了方便开发者与 Web 资源交互，提供了原生对象 Location、URL 和 URLSearchParams，它们能帮助我们轻松获取和操作 URL 中的信息。

本文将深入剖析这三个原生对象，揭示它们的神秘面纱。我们将从 Location 对象开始，它能为我们提供当前页面的完整 URL 信息，包括协议、域名、端口、路径和哈希值。接下来，我们将探究 URL 对象，它比 Location 对象更强大，允许我们拆分和修改 URL 的各个部分。最后，我们将了解 URLSearchParams 对象，它专门用于处理 URL 中的查询字符串参数，让开发者轻松地获取和操纵这些参数。

浏览器中的 URL 对象

Location 对象

Location 对象包含当前页面的完整 URL 信息，包括以下部分：

• protocol：页面使用的协议，如 "http" 或 "https"。
• hostname：页面的域名。
• port：页面的端口号，默认为 80（HTTP）或 443（HTTPS）。
• pathname：页面的路径，从根目录开始。
• search：页面的查询字符串，以问号 (?) 开头。
• hash：页面的哈希值，以哈希符号 (#) 开头。

URL 对象

URL 对象是一个更强大的工具，它允许我们拆分和修改 URL 的各个部分。我们可以在构造函数中传递一个 URL 字符串来创建 URL 对象：

const url = new URL("https://www.example.com/path/to/page?key=value#fragment");

URL 对象提供以下属性：

• protocol：URL 的协议，与 Location 对象中的相同。
• hostname：URL 的域名，与 Location 对象中的相同。
• port：URL 的端口号，与 Location 对象中的相同。
• pathname：URL 的路径，与 Location 对象中的相同。
• search：URL 的查询字符串，与 Location 对象中的相同。
• hash：URL 的哈希值，与 Location 对象中的相同。
• href：URL 的完整字符串表示形式。
• origin：URL 的同源策略字符串，包括协议、域名和端口号。

URL 对象还提供以下方法来修改 URL：

• setProtocol(protocol)：设置 URL 的协议。
• setHostname(hostname)：设置 URL 的域名。
• setPort(port)：设置 URL 的端口号。
• setPathname(pathname)：设置 URL 的路径。
• setSearch(search)：设置 URL 的查询字符串。
• setHash(hash)：设置 URL 的哈希值。

URLSearchParams 对象

URLSearchParams 对象专门用于处理 URL 中的查询字符串参数。我们可以从 URL 对象中获取 URLSearchParams 对象：

const params = url.searchParams;

URLSearchParams 对象提供以下方法来操作查询字符串参数：

• append(name, value)：向查询字符串中添加一个新参数。
• delete(name)：从查询字符串中删除一个参数。
• get(name)：获取查询字符串中指定参数的值。
• getAll(name)：获取查询字符串中指定参数的所有值。
• has(name)：检查查询字符串中是否存在指定参数。
• set(name, value)：设置查询字符串中指定参数的值。
• forEach(callback)：遍历查询字符串中的所有参数。
• keys()：返回查询字符串中所有参数名的迭代器。
• values()：返回查询字符串中所有参数值的迭代器。
• entries()：返回查询字符串中所有参数名和值的迭代器。

结论

Location、URL 和 URLSearchParams 对象是浏览器提供的强大工具，它们使开发者能够轻松地获取和操作 URL 信息。通过理解这些对象的用法，我们可以更有效地与 Web 资源进行交互，构建更健壮的 Web 应用程序。