js怎么获取当前url

使用JavaScript获取当前URL的方法有多种，主要包括：通过window.location.href、document.URL、window.location、window.location.hostname等。其中，最常见和最直接的方法是使用window.location.href来获取完整的当前URL。window.location.href不仅简单易用，而且可以直接获取当前页面的完整URL，包括协议、主机名、端口号（如有）、路径和查询字符串。

一、通过window.location.href获取当前URL

window.location.href是获取当前页面URL的最常见方法。它返回一个包含完整URL的字符串，包括协议、主机名、路径和查询字符串。

var currentURL = window.location.href;

console.log(currentURL); // 输出完整的URL

详细描述

window.location.href的优势在于其简单直接。只需一行代码即可获取当前页面的完整URL，这对于大多数需求已经足够。例如，如果你的页面需要根据当前URL的不同部分（如路径或查询参数）进行不同的处理，使用window.location.href可以快速获取这些信息。

二、通过document.URL获取当前URL

document.URL是另一个获取当前URL的方法，尽管它与window.location.href类似，但在某些情况下更为直观。

var currentURL = document.URL;

console.log(currentURL); // 输出完整的URL

详细描述

document.URL和window.location.href功能几乎相同，但document.URL更直接地与文档对象模型（DOM）相关联。在某些旧版本的浏览器中，可能会发现document.URL的兼容性稍好。

三、通过window.location对象获取不同部分的URL

window.location对象包含多个属性，可以获取URL的不同部分，如协议、主机名、路径和查询字符串。

var protocol = window.location.protocol; // 获取协议（http:, https:）

var hostname = window.location.hostname; // 获取主机名
var port = window.location.port;         // 获取端口号
var pathname = window.location.pathname; // 获取路径
var search = window.location.search;     // 获取查询字符串
var hash = window.location.hash;         // 获取哈希（#）部分

详细描述

使用window.location对象可以分别获取URL的不同部分，这在需要对URL进行更细粒度的处理时非常有用。例如，某些情况下，你可能只需要获取路径或查询字符串，而不是整个URL。这时，使用window.location对象的不同属性可以简化代码并提高可读性。

四、通过window.location.origin获取基本URL

window.location.origin可以获取当前URL的基本部分，包括协议、主机名和端口号（如有）。

var origin = window.location.origin;

console.log(origin); // 输出基本URL

详细描述

window.location.origin在需要获取URL的基本部分时非常有用，例如在需要构建相对URL或生成跨域请求时。它提供了一个简洁的方法来获取协议、主机名和端口号的组合，而不需要手动拼接这些部分。

五、使用URL对象解析和操作URL

现代浏览器支持URL对象，它可以用于解析和操作URL，更加灵活和强大。

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

console.log(url.href);      // 完整URL
console.log(url.origin);    // 基本URL
console.log(url.pathname);  // 路径
console.log(url.search);    // 查询字符串
console.log(url.hash);      // 哈希（#）部分

详细描述

URL对象不仅可以解析URL，还提供了对URL的各个部分进行操作的方法。例如，可以使用URL对象轻松地添加、修改或删除查询参数。对于需要进行复杂URL操作的情况，URL对象是非常有用的工具。

六、处理URL的常见场景

在实际开发中，处理URL的需求往往不仅限于获取当前URL，还包括解析查询参数、构建新的URL等。以下是一些常见的处理场景及其实现方法：

解析查询参数

使用URL对象解析查询参数并将其转换为键值对。

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

var params = new URLSearchParams(url.search);
params.forEach(function(value, key) {
    console.log(key + ": " + value);
});

构建新的URL

使用URL对象构建新的URL，便于进行重定向或生成链接。

var newURL = new URL('https://example.com');

newURL.pathname = '/path/to/resource';
newURL.searchParams.set('key', 'value');
console.log(newURL.href); // 输出新的URL

动态修改URL

在不重新加载页面的情况下，动态修改URL。例如，修改查询参数。

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

url.searchParams.set('key', 'newValue');
window.history.pushState({}, '', url.href);

七、总结

在JavaScript中获取和操作URL的方法多种多样，从最简单的window.location.href到功能强大的URL对象，可以根据具体需求选择合适的方法。无论是获取当前URL的不同部分、解析查询参数、构建新的URL，还是动态修改URL，掌握这些方法将极大地提高开发效率和代码的可维护性。

相关问答FAQs：

1. 如何使用JavaScript获取当前URL？

JavaScript提供了一个内置的全局对象window，可以通过它来获取当前页面的URL。你可以使用window.location.href来获取完整的URL，或者使用window.location.pathname来获取URL的路径部分。

2. 如何获取当前URL的查询参数？

如果你需要获取当前URL中的查询参数，可以使用window.location.search属性。该属性返回URL中的查询字符串，包括问号（?）和后面的参数部分。你可以进一步处理该字符串，以提取所需的参数值。

3. 如何获取当前URL的哈希值？

哈希值是URL中#符号后面的部分，常用于页面内部锚点链接或前端路由。要获取当前URL的哈希值，你可以使用window.location.hash属性。该属性返回URL中#符号后面的部分，你可以通过对该字符串进行处理来获取所需的信息。