在JavaScript中获取网站路径是前端开发中常见的需求，无论是实现路由跳转、数据请求还是状态管理，都离不开对路径的准确操作，JavaScript提供了多种方式获取不同层级的路径信息，这些方法涵盖了从当前页面的完整URL到特定路径片段的获取,开发者可以根据实际需求选择合适的方案。
获取完整URL及组成部分
JavaScript的Location对象提供了丰富的属性和方法来获取URL的各个部分。window.location或document.location指向当前页面的Location对象，通过它可以获取完整的URL及其组成部分，完整的URL通常包括协议、主机名、端口号、路径名、查询参数、哈希值等部分。window.location.href返回完整的URL字符串，window.location.protocol获取协议部分（如"http:"或"https:"），window.location.hostname获取主机名（如"www.example.com"），window.location.port获取端口号（如"8080"），window.location.pathname获取路径部分（如"/index.html"），window.location.search获取查询参数（如"?id=123"），window.location.hash获取哈希值（如"#section1"）,这些属性的组合使用可以满足对URL各部分的精细化操作需求。
获取路径名（Pathname）
路径名是URL中协议和主机名之后的部分，通常表示资源在服务器上的具体位置，在JavaScript中，window.location.pathname是最常用的获取路径名的方法，当前URL为"https://www.example.com/products/item?id=123"，则window.location.pathname将返回"/products/item"，需要注意的是，路径名总是以斜杠"/"开头，如果没有路径部分（如访问根域名），则返回空字符串"/"，在实际开发中，路径名常用于实现前端路由的匹配，例如在React Router或Vue Router中,根据路径名渲染对应的组件。
获取查询参数（Query String）
查询参数是URL中问号"?"后面的部分，通常以键值对的形式传递数据，虽然window.location.search可以直接获取查询参数字符串（如"?id=123&name=test"），但直接使用字符串操作处理参数较为繁琐，开发者通常会借助工具函数或第三方库来解析查询参数，可以通过以下原生JavaScript代码将查询参数转换为对象：javascript function getQueryParams() { const params = {}; const queryString = window.location.search.substring(1); const pairs = queryString.split('&'); pairs.forEach(pair => { const [key, value] = pair.split('='); params[key] = decodeURIComponent(value || ''); }); return params; } 调用该函数后，getQueryParams()将返回一个对象，如{id: "123", name: "test"},方便后续的数据处理。
获取哈希值（Hash）
哈希值是URL中井号"#"后面的部分，常用于单页应用中的页面锚点定位或路由管理，通过window.location.hash可以获取哈希值字符串，#section1"或"#/home"，需要注意的是，哈希值的变化不会触发页面刷新，因此适合实现前端路由的无刷新跳转，在Vue Router中，哈希模式的路由就是基于window.location.hash实现的,通过监听哈希值的变化来切换组件。
相对路径与绝对路径的转换
在某些场景下，需要将相对路径转换为绝对路径，或者获取当前页面的基础路径，JavaScript的URL接口为此提供了便利。new URL(relativePath, baseUrl)可以将相对路径转换为绝对路径，假设当前页面URL为"https://www.example.com/docs/"，则new URL('/api', window.location.href).href将返回"https://www.example.com/api"。window.location.origin可以获取当前页面的 origin（协议+主机名+端口号）,常用于构建API请求的基础URL。
不同场景下的路径获取示例
| 场景 | 需求 | 解决方案 |
|---|---|---|
| 获取当前页面的完整路径 | 需要完整的URL字符串 | window.location.href |
| 获取当前页面的路径名（不含查询参数和哈希） | 用于路由匹配 | window.location.pathname |
| 获取URL中的查询参数并解析为对象 | 获取参数值 | 结合window.location.search和字符串解析函数 |
| 获取当前页面的基础路径（不含路径名） | 构建API请求URL | window.location.origin |
| 将相对路径转换为绝对路径 | 处理动态生成的URL | new URL(relativePath, baseUrl) |
注意事项
- 安全性：直接使用用户输入的路径可能导致XSS攻击,需对路径进行编码或验证。
- 兼容性：
URL接口在现代浏览器中广泛支持,但在旧版浏览器中可能需要polyfill。 - 路由模式：在单页应用中,需区分哈希路由和HTML5历史模式路由的路径获取方式。
相关问答FAQs
问题1：如何获取当前URL的查询参数并解析为对象？
解答：可以通过window.location.search获取查询字符串，然后手动解析或使用URLSearchParams API，```javascript
const params = new URLSearchParams(window.location.search);
const id = params.get('id'); // 获取指定参数值
const allParams = Object.fromEntries(params.entries()); // 转换为对象
**问题2：如何获取当前页面的基础路径（不含路径名和查询参数）？**
解答：使用`window.location.origin`可以获取当前页面的基础路径，包含协议、主机名和端口号，```javascript
const baseUrl = window.location.origin; // 返回 "https://www.example.com"
```如果需要包含路径名但不包含查询参数和哈希，可以使用`window.location.pathname`，但需注意路径名可能包含多级目录。
