通过 JavaScript 解析 URL28

在 JavaScript 中，我们可以使用 URL 构造函数解析和处理 URL 字符串。通过 URL 对象，我们可以轻松获取 URL 的各种部分，例如协议、主机名、路径和查询字符串。

创建 URL 对象

要创建 URL 对象，可以使用以下语法：const url = new URL(urlString);

其中 urlString 是要解析的 URL 字符串。

获取 URL 部分

一旦创建了 URL 对象，就可以使用以下属性获取其各个部分：* protocol：URL 的协议（例如 "http:" 或 "https:")。
* hostname：URL 的主机名（例如 ""）。
* pathname：URL 的路径（例如 "/"）。
* search：URL 的查询字符串（例如 "?key1=value1&key2=value2"）。
* hash：URL 的哈希部分（例如 "#anchor"）。

这些属性都是只读的，这意味着你只能获取它们的值，而不能更改它们。

示例

以下示例说明如何解析和获取 URL 部分：const url = new URL("/?key1=value1&key2=value2#anchor");
(); // "https:"
(); // ""
(); // "/"
(); // "?key1=value1&key2=value2"
(); // "#anchor"

解析查询字符串

查询字符串是一个包含键值对的字符串，用于向服务器传递附加信息。要解析查询字符串，可以使用 URLSearchParams 对象。

以下示例说明如何解析查询字符串：const url = new URL("/?key1=value1&key2=value2");
const searchParams = ;
(("key1")); // "value1"
(("key2")); // "value2"
(("key1")); // ["value1"]

URLSearchParams 对象还提供其他方法，例如 has()、set() 和 delete()，用于处理查询字符串中的键值对。

创建新 URL

也可以使用 URL 对象创建新的 URL 字符串。以下示例说明如何创建新的 URL：const url1 = new URL("/path");
const url2 = new URL("", url1);
(()); // "/path/"

在第二个 URL 中，我们使用 作为路径名，并使用第一个 URL 作为基准 URL。这将创建一个新的 URL，其协议、主机名和端口与基准 URL 相同，但路径名为 ""。

在 JavaScript 中使用 URL 构造函数解析 URL 是一种简单高效的方法，可以让开发者轻松获取和处理 URL 的各个部分。通过结合 URLSearchParams 对象，开发人员还可以轻松解析和操作查询字符串。

2025-02-13

上一篇：JavaScript Alert 乱码的解决之道

下一篇：JavaScript 的优势和劣势