js如何获取当前页面的url

在JavaScript中获取当前页面的URL非常简单，只需使用window.location对象。通过window.location.href、window.location.pathname、window.location.search等属性可以获取整个URL、路径名、查询字符串等。其中，window.location.href是最常用的，因为它返回整个URL字符串。下面将详细展开如何使用这些属性，以及在实际开发中的一些高级用法。

一、获取整个URL

使用window.location.href可以获取当前页面的整个URL。

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

这个属性返回一个字符串，包含了URL的所有部分，如协议（http或https）、主机名、端口号（如果有的话）、路径以及查询参数。

二、获取路径名

路径名是指URL中从主机名之后到查询参数之前的部分，可以使用window.location.pathname来获取。

let pathName = window.location.pathname;
console.log(pathName);

例如，对于URL https://www.example.com/path/to/page?query=123，window.location.pathname将返回/path/to/page。

三、获取查询字符串

查询字符串是指URL中从?开始到#之前的部分，可以使用window.location.search来获取。

let queryString = window.location.search;
console.log(queryString);

对于URL https://www.example.com/path/to/page?query=123，window.location.search将返回?query=123。

四、获取哈希值

哈希值是指URL中从#开始的部分，可以使用window.location.hash来获取。

let hashValue = window.location.hash;
console.log(hashValue);

例如，对于URL https://www.example.com/path/to/page?query=123#section2，window.location.hash将返回#section2。

五、获取主机名和协议

如果只需要获取主机名或协议，可以分别使用window.location.hostname和window.location.protocol。

let hostName = window.location.hostname;
console.log(hostName); // 输出 www.example.com
let protocol = window.location.protocol;
console.log(protocol); // 输出 https:

六、组合使用

在实际开发中，经常需要组合使用这些属性来构建新的URL或解析现有URL中的各个部分。

let baseUrl = window.location.protocol + "//" + window.location.hostname + (window.location.port ? ':' + window.location.port : '');
console.log(baseUrl);

这段代码会输出当前页面的基本URL，不包括路径和查询参数。例如，对于URL https://www.example.com:8080/path/to/page?query=123#section2，它将返回 https://www.example.com:8080。

七、解析查询参数

查询字符串通常包含多个参数，可以使用URLSearchParams API来解析这些参数。

let queryParams = new URLSearchParams(window.location.search);
let paramValue = queryParams.get('query');
console.log(paramValue);

对于URL https://www.example.com/path/to/page?query=123&name=test，queryParams.get('query')将返回123。

八、修改URL

有时需要修改当前页面的URL而不刷新页面，可以使用history.pushState或history.replaceState。

let newUrl = window.location.protocol + "//" + window.location.host + window.location.pathname + '?newQuery=456';
window.history.pushState({ path: newUrl }, '', newUrl);

这段代码会将URL修改为包含新的查询参数，但不会触发页面刷新。

九、应用场景

单页应用（SPA）：在单页应用中，利用这些方法可以在不刷新页面的情况下改变URL，从而改变浏览器历史记录，这对于实现前进和后退功能非常有用。
动态内容加载：在某些情况下，需要根据URL中的参数来动态加载内容。例如，电商网站可能会根据查询字符串来显示不同的产品列表。
用户跟踪：通过解析URL，可以记录用户访问的路径，从而分析用户行为。

十、项目团队管理

在项目团队管理中，尤其是研发项目管理，使用上述方法获取并处理URL信息是非常常见的需求。例如，在开发基于Web的管理系统时，经常需要根据URL中的参数来显示不同的项目或任务信息。推荐使用研发项目管理系统PingCode和通用项目协作软件Worktile，它们都能很好地支持这种需求。

结论

获取并操作当前页面的URL是JavaScript开发中非常基础且重要的一部分。通过灵活运用window.location对象，可以轻松实现对URL的获取、解析和修改，从而满足各种实际需求。在项目管理中，借助专业的管理系统如PingCode和Worktile，可以更高效地进行团队协作和项目跟踪。