JS获取当前页面路径的几种方法

本文深入讲解了JavaScript中获取与操作当前页面URL的实用技巧，涵盖从简单获取完整地址（window.location.href）到精细解析协议、路径、查询参数和锚点等各组成部分，并重点介绍了现代浏览器推荐的URLSearchParams API来安全高效地读取和修改查询参数，同时提供兼容旧版浏览器的手动解析方案及通过URL构造器和history API实现无刷新更新地址栏的方法，帮助开发者轻松应对路由判断、参数处理和动态跳转等常见前端需求。

在JavaScript中获取和解析当前页面的URL路径非常常见，比如用于路由判断、参数读取或页面跳转。通过浏览器提供的 window.location 对象，我们可以轻松获取URL的各个部分。

1. 获取完整的当前页面URL

使用 window.location.href 可以获取完整的URL字符串。

2. 解析URL各组成部分

window.location 提供了多个属性来分别获取URL的不同部分：

• protocol：协议（http: 或 https:）
• host：主机名 + 端口（如 example.com:8080）
• hostname：主机名（如 example.com）
• port：端口号（若无则为空）
• pathname：路径部分（如 /users/profile）
• search：查询参数（从 ? 开始的部分）
• hash：锚点部分（从 # 开始的部分）

示例：

3. 获取并解析查询参数（Query Parameters）

要提取URL中的参数，可以使用 URLSearchParams API，这是现代浏览器推荐的方式。

支持多值参数：

如果需要兼容老版本浏览器，也可以手动解析：

4. 构建或修改URL

可以结合 location 属性和 URL API 来安全地拼接或修改URL。

可用于无刷新更新参数：

基本上就这些。掌握 location 各属性和 URLSearchParams，就能灵活处理前端常见的URL操作需求。不复杂但容易忽略细节，比如编码和兼容性问题，建议优先使用标准API。

本篇关于《JS获取当前页面路径的几种方法》的介绍就到此结束啦，但是学无止境，想要了解学习更多关于文章的相关知识，请关注golang学习网公众号！