如何使用JS获取当前页面URL信息？JavaScript URL对象操作全攻略

在现代 Web 开发中，URL（统一资源定位符）是非常关键的一个概念。通过 JavaScript 的 URL 对象，我们可以方便地操作和解析 URL，从而更高效地管理页面和资源。本文将详细介绍 URL 对象的使用方法，并针对常见的需求如获取当前页面 URL、解析 URL 参数、跳转页面等进行讲解。

本文主要内容：

如何使用 JavaScript 的 URL 对象获取和操作当前页面 URL
JavaScript 获取 URL 参数和解析方法详解
完整指南：使用 JavaScript 解析和修改 URL 各部分
JavaScript 如何获取当前 URL、域名和协议信息
实用教程：使用 JavaScript 跳转页面和处理 URL 对象

什么是 `URL` 对象？

URL 对象是浏览器提供的一个标准 API，用于处理和解析 URL。它简化了从 URL 中提取信息的过程，使得我们不再需要手动解析 URL 字符串。通过 URL 对象，我们可以轻松获取和修改 URL 的各个组成部分。

如何创建 `URL` 对象

要创建一个 URL 对象，我们可以使用 URL 构造函数。这个构造函数接收一个 URL 字符串作为参数，并返回一个 URL 实例。我们还可以传入一个基础 URL 来处理相对地址。

示例代码

// 创建一个绝对地址的 URL 对象
const absoluteUrl = new URL("https://www.example.com/page");

// 创建一个相对地址的 URL 对象，指定基础 URL
const relativeUrl = new URL("/page", "https://www.example.com");

获取当前页面 URL

要获取当前页面的完整 URL，可以使用 window.location.href。但如果我们想要更灵活的操作，比如从当前 URL 中提取特定部分，URL 对象则更为适用。

示例代码

// 使用 URL 对象获取当前页面 URL
const currentUrl = new URL(window.location.href);
console.log(currentUrl.href); // 输出当前页面的完整 URL

解析 URL 参数

要从 URL 中提取查询字符串参数，可以使用 URLSearchParams 对象。这个对象提供了方法来访问和操作 URL 中的查询参数。

示例代码

const url = new URL("https://www.example.com/?key1=value1&key2=value2");
const params = new URLSearchParams(url.search);

console.log(params.get("key1")); // 输出 "value1"
console.log(params.get("key2")); // 输出 "value2"

获取当前 URL 的各个部分

URL 对象具有多个属性，我们可以用来获取 URL 的不同部分，如协议、域名、路径等。

示例代码

const url = new URL(
  "https://www.example.com:8080/path/to/resource?query=param#hash"
);

console.log(url.protocol); // 输出 "https:"
console.log(url.hostname); // 输出 "www.example.com"
console.log(url.port); // 输出 "8080"
console.log(url.pathname); // 输出 "/path/to/resource"
console.log(url.search); // 输出 "?query=param"
console.log(url.hash); // 输出 "#hash"

跳转页面

要通过 JavaScript 进行页面跳转，我们可以直接设置 window.location.href 或使用 window.location.assign() 方法。

示例代码

// 通过设置 href 跳转页面
window.location.href = "https://www.example.com";

// 使用 assign 方法跳转页面
window.location.assign("https://www.example.com");

修改 URL 属性

URL 对象的属性是可读可写的，允许我们修改 URL 的各个部分。

示例代码

const url = new URL("https://www.example.com");

// 修改协议
url.protocol = "http:";
console.log(url.href); // 输出 "http://www.example.com"

// 修改路径
url.pathname = "/new-path";
console.log(url.href); // 输出 "http://www.example.com/new-path"

`URL` 对象的静态方法

URL 对象还提供了两个静态方法 createObjectURL() 和 revokeObjectURL()，用于处理 Blob 和 File 对象的 URL。

示例代码

// 创建对象 URL
const blob = new Blob(["Hello World"], { type: "text/plain" });
const objectUrl = URL.createObjectURL(blob);
console.log(objectUrl);

// 释放对象 URL
URL.revokeObjectURL(objectUrl);