js url

// 示例代码：使用 JavaScript 操作 URL

// 获取当前页面的完整 URL
let currentUrl = window.location.href;
console.log("当前页面的完整 URL:", currentUrl);

// 创建一个 URL 对象来解析 URL
let url = new URL(currentUrl);
console.log("协议:", url.protocol); // 输出 URL 的协议部分，例如 "http:" 或 "https:"
console.log("主机名:", url.hostname); // 输出主机名，例如 "example.com"
console.log("端口:", url.port); // 输出端口号，如果没有指定则为空字符串
console.log("路径:", url.pathname); // 输出路径部分，例如 "/path/to/page"
console.log("查询参数:", url.search); // 输出查询字符串部分，例如 "?key=value"
console.log("哈希部分:", url.hash); // 输出哈希部分，例如 "#section"

// 修改 URL 查询参数
let params = new URLSearchParams(url.search);
params.append('newKey', 'newValue'); // 添加新的查询参数
url.search = params.toString(); // 更新 URL 查询字符串
console.log("更新后的 URL:", url.toString());

// 构建一个新的 URL
let newUrl = new URL('https://example.com/path?query=string#fragment');
console.log("新构建的 URL:", newUrl.toString());

解释说明：

1. 获取当前页面的完整 URL：通过 window.location.href 可以获取当前页面的完整 URL。
2. 创建 URL 对象：使用 URL 构造函数可以方便地解析和操作 URL 的各个部分，如协议、主机名、端口、路径、查询参数和哈希部分。
3. 修改查询参数：通过 URLSearchParams 对象可以轻松地添加、删除或修改查询参数。
4. 构建新的 URL：可以直接使用 URL 构造函数来构建一个新的 URL。

希望这段代码和解释对你有帮助！