用 JavaScript 获取当前 URL

在前端开发中，有时需要获取当前网页的 URL 地址，以便进行一些操作或展示。本文将介绍如何使用 JavaScript 获取当前 URL，并提供详细的示例代码和指导意义。

基础方法

JavaScript 提供了 window.location 对象来处理 URL 相关信息。其中，window.location.href 属性可以获取当前 URL 的完整地址：

const currentUrl = window.location.href;
console.log(currentUrl);

以上代码输出结果为当前页面的完整 URL 地址，例如：https://example.com/path/to/page.html?query=string#hash。

如果只想获取当前页面的主机名（host）和协议（protocol），可以分别使用 window.location.hostname 和 window.location.protocol 属性：

const hostname = window.location.hostname;
const protocol = window.location.protocol;
console.log(`${protocol}//${hostname}`);

以上代码输出结果为当前页面的协议和主机名，例如：https://example.com。

URL 解析方法

除了基础方法外，JavaScript 还提供了 URL 对象来解析和操作 URL。需要注意的是，该对象只在部分浏览器中得到支持（如 Chrome、Firefox、Safari 等）。

使用 new URL() 构造函数可以创建一个 URL 实例，然后就可以通过实例的属性获取 URL 的各个组成部分，例如：

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

console.log(url.host); // example.com
console.log(url.pathname); // /path/to/page.html
console.log(url.search); // ?query=string
console.log(url.hash); // #hash

以上代码输出结果分别为当前页面的主机名、路径、查询字符串和哈希值。

除了获取 URL 组成部分外，URL 对象还提供了一些方便的方法来操作 URL。例如，可以使用 url.searchParams.get() 方法获取查询参数：

const searchParams = url.searchParams;
console.log(searchParams.get('query')); // string

以上代码输出结果为查询参数中名为 query 的值。

总结

JavaScript 提供了多种方式来获取当前 URL，包括基础方法和 URL 解析方法。基础方法简单易用，适合处理简单场景；而 URL 解析方法更为灵活，可自由操作 URL 各个组成部分。开发者可以根据实际需求选择不同的方法来获取和操作 URL。

示例代码：https://codepen.io/chatgpt/pen/dyYwZzP

来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/7147