如何通过JavaScript获取当前URL：深入解析

如何通过JavaScript获取当前URL：深入解析隐藏的细节

想象一下：你坐在电脑前，打开浏览器，地址栏中显示着一个长长的链接。你希望你的JavaScript脚本能够“读取”这个链接，将其分解成各个部分，并利用它们做一些有用的事情。熟悉的情景吗？当然！这是Stack Overflow上最热门的问题之一——“Get the current URL with JavaScript?”获得了数十万次浏览。为什么？因为任何严肃的项目都离不开这个任务：动态导航、分析、表单、AJAX请求——处处都需要知道我们当前的位置。

在本文中，我不仅会向你展示神奇的代码行window.location.href，还会深入浏览器的内部。你将了解location对象的结构、它存储了哪些属性、如何安全地解析URL，以及你会遇到哪些陷阱。开始吧！

认识一下：window.location对象

每当你打开一个网页时，浏览器都会创建一个特殊的对象——window.location。它存在于全局命名空间中，包含当前URL的所有信息。只需在控制台中输入：

console.log(window.location);

你会看到一个包含多个属性的对象。其中最常用的有：

\n
• href — 完整的URL字符串（例如，https://pythonlib.ru/blog?page=2#comments）。
\n
• protocol — 协议（https:或http:）。
\n
• hostname — 主机名（pythonlib.ru）。
\n
• port — 端口（如果未指定，则为空字符串）。
\n
• pathname — 文件或页面路径（/blog）。
\n
• search — 查询字符串（?之后的所有内容，例如?page=2）。
\n
• hash — 链接片段（#之后的所有内容，例如#comments）。
\n

当你点击链接或更改地址栏时，浏览器会自动更新这些属性。你不能随意覆盖它们（嗯，几乎不能——稍后会讲到），但可以随意读取。

如何获取完整URL：最简单的方法

如果你需要整个字符串，请使用href属性：

const currentUrl = window.location.href;\nconsole.log(currentUrl);\n// 输出："https://pythonlib.ru/blog?page=2#comments"

这是“黄金标准”。它在所有浏览器中都能工作，包括Internet Explorer（是的，它在某些企业网络中仍然存在）。请记住它，作为“如何在JavaScript中获取当前URL”的通用答案。

分解URL：为什么需要这样做？

假设你在开发一个在线商店。你需要了解查询字符串中传递了哪些参数：?category=books&sort=price。或者你想平滑滚动到带有锚点#reviews的元素。仅仅获取href是不够的。你需要将其分解成各个组成部分。

在现代JavaScript中，最可靠的方法是使用URL构造函数：

const url = new URL(window.location.href);\nconsole.log(url.searchParams.get('category')); // "books"\nconsole.log(url.hash); // "#reviews"

URL对象提供了方便的searchParams方法——这是一个真正的查询字符串解析器。你可以获取、添加和删除参数，而无需手动拆分字符串。在底层，它使用了与window.location相同的属性，但提供了更简洁的API。

深入内部：浏览器如何处理URL

当你在浏览器地址栏中输入地址时，会发生一连串的事件。浏览器使用WHATWG URL Standard规范中描述的算法将字符串分解为组件。看起来像这样