JS怎么获取当前页面URL？window.location属性详解

在浏览器端 JavaScript 中，想要获取当前页面的完整 URL，最直接且标准的做法是读取 window.location.href，或者直接简写为 location.href。如果只需在控制台或简单脚本中输出整个地址，使用 window.location.href 就能立即拿到形如 "https://example.com/shop/item?id=102#detail" 的字符串。但在实际开发中，我们往往并不需要一整串原始地址，而是需要精确提取出协议、域名、路径、查询参数或者哈希锚点。window.location 对象本身就是一个结构化的 URL 解析器，掌握它的各项属性和行为逻辑，能够帮助我们在页面跳转、参数解析与状态管理中编写出更严谨的代码。

一、获取当前 URL 的三种常见写法与取舍

日常编码中，你可能会在不同项目中见到几种不同的获取方式。在深入剖析各子属性之前，先来辨析这三种写法在实际使用中的定位：

// 1. 最推荐的标准写法：明确获取字符串形式的完整 URL
const currentUrl1 = window.location.href;

// 2. 隐式类型转换写法：直接读取 location
const currentUrl2 = window.location.toString(); // 或 String(window.location)

// 3. 读取文档对象的 URL：等同于只读的当前地址
const currentUrl3 = document.URL;

这三种写法在现代浏览器中通常会得到相同的完整地址字符串，但在语义和安全性上略有差异：

• window.location.href：返回值严格是只读字符串（在读取时），语义最直观，且在绝大多数编码规范与类型推导（如 TypeScript）中都最受推荐。
• 直接读取 window.location：window.location 本身是一个 Location 类型的特殊对象，并非纯字符串。如果直接将它赋值给普通变量（如 const u = location），拿到的依然是对象引用，只有发生隐式转换或调用 .toString() 时才会变成字符串。
• document.URL：这是 Document 接口提供的只读属性，它总是反映文档加载时的绝对 URL，不能通过对其赋值来触发页面导航。如果只是读取，它完全可用，但为了团队代码一致性，通常更偏向统一使用 window.location。

图 1：获取当前页面 URL 的三种主要途径及定位对比

二、拆解 URL：window.location 的核心属性结构

一个标准的统一资源定位符（URL）由多个逻辑段落拼接而成。window.location 对象自动完成了对当前 URL 的拆解，无需开发者手动书写复杂的正则表达式去截取各个部分。以下是一张典型的 URL 构成对照表：

为了直观建立每个属性与实际 URL 字段的对应关系，请参考下面的结构图解：

图 2：URL 各逻辑分段与 location 属性对照图

三、实操步骤：如何安全解析查询参数与路径

虽然 location.search 能够获取形如 "?id=12&sort=hot" 的问号串，但在早期的前端代码中，不少开发者会写复杂的 split('&') 或者正则去手工解析键值对。这种方法在遇到字符转义、空格被编码为 + 或特殊编码字符时极其容易出错。

现代浏览器已全面原生支持 URLSearchParams API，配合 location.search 是目前最规范、最简便的操作步骤。

图 3：获取并安全解析 URL 参数的标准操作步骤

完整实操代码示例

// 假设当前浏览器访问的 URL 是：
// https://example.com:3000/products/list?category=book&keyword=javascript#page-2

// 1. 获取完整地址
const fullUrl = window.location.href;
console.log("完整URL:", fullUrl);

// 2. 获取域名和端口
console.log("协议:", window.location.protocol); // 输出: "https:"
console.log("主机名:", window.location.hostname); // 输出: "example.com"
console.log("端口号:", window.location.port);     // 输出: "3000"
console.log("源(Origin):", window.location.origin); // 输出: "https://example.com:3000"

// 3. 解析路径分段
const pathSegments = window.location.pathname.split('/').filter(Boolean);
console.log("路径分段数组:", pathSegments); // 输出: ["products", "list"]

// 4. 解析 Query 查询参数
const searchParams = new URLSearchParams(window.location.search);
const category = searchParams.get('category'); // 获取单个参数
const keyword = searchParams.get('keyword');
const notFound = searchParams.get('non_exist'); // 不存在时返回 null

console.log("分类:", category); // 输出: "book"
console.log("关键词:", keyword); // 输出: "javascript"
console.log("不存在的参数:", notFound); // 输出: null

// 5. 获取与更新 Hash 锚点
console.log("当前锚点:", window.location.hash); // 输出: "#page-2"

四、容易混淆的认知辨析

五、知识总结：window.location 常用属性与方法全览

为了便于在日常开发中随时回顾与查阅，下图对 window.location 的所有读写属性及其自带的核心导航方法进行了系统性归纳：

图 4：window.location 属性与导航方法架构总结

六、注意事项与最佳实践

• Node.js 与服务端渲染（SSR）环境差异：window.location 属于浏览器全局对象 BOM 的一部分。在 Next.js、Nuxt.js 等服务端渲染框架的服务端阶段，执行 window.location 会直接抛出 ReferenceError: window is not defined。在 SSR 项目中读取 URL 时，务必确保代码在 useEffect / mounted 等客户端生命周期中执行，或者先使用 typeof window !== 'undefined' 进行环境守卫。
• 修改属性触发的重定向：window.location 的大部分属性（如 href、pathname、search）不仅支持读取，还支持写入。一旦为它们赋予新值，浏览器会立即触发页面卸载并重新导航（修改 hash 则仅滚动或触发 hashchange 事件，不重载页面）。因此在仅需提取信息时，请使用常量接收，避免意外赋错值引发页面死循环刷新。