JavaScript获取当前URL路径过程解析

在 JavaScript 中获取当前页面的 URL 路径是我们常见的需求之一。下面将详细介绍在不同的情况下如何获取当前 URL 路径。

1. window.location.href

我们可以通过 window.location.href 获取当前页面的完整 URL，包括协议、主机名、端口号和路径等信息。例如：

console.log(window.location.href);
// 输出结果如："https://www.example.com:8080/pathname/"

但是，window.location.href 获取到的 URL 是字符串类型，如果想单独获取 URL 中的协议、主机名、参数等信息需要进行字符串处理。

2. window.location.protocol、window.location.hostname 等属性

我们也可以通过 window.location 对象获取 URL 的各个组成部分，以下为常见的获取方式：

console.log(window.location.protocol);    // 输出协议，例如："https:"
console.log(window.location.hostname);    // 输出主机名，例如："www.example.com"
console.log(window.location.port);        // 输出端口号，例如："8080"
console.log(window.location.pathname);    // 输出路径，例如："/pathname/"
console.log(window.location.search);      // 输出查询参数，例如："?key1=value1&key2=value2"
console.log(window.location.hash);        // 输出哈希值，例如："#top"

通过这种方式获取 URL 的各个组成部分更加灵活和方便，无需进行字符串处理。

示例说明

示例 1：获取当前页面的 URL

下面是一个获取当前页面 URL 的示例代码：

var currentURL = window.location.href;
console.log(currentURL);

示例 2：获取当前页面的查询参数

下面是一个获取当前页面查询参数中的某个参数值的示例代码：

var params = new URLSearchParams(window.location.search); 
var paramValue = params.get('key1');
console.log(paramValue);

以上就是 JavaScript 获取当前 URL 路径的完整攻略。