JavaScript 如何获取当前 URL

在日常做网页开发时，我们经常需要拿到当前页面的网址做一些操作——比如根据网址调整页面按钮状态，或者把当前链接分享出去。很多刚接触前端的朋友会好奇，怎么用最基础的JavaScript就能拿到这些网址信息？其实JS早就给我们准备了现成的工具，不用自己手写一堆复杂逻辑。

我们要用到的核心是浏览器自带的window.location对象，它就像一个网址的“信息说明书”，把当前URL拆成了好几个实用的部分，每一个部分对应一个属性。下面我们分几个常用场景来拆解，都是开发中高频用到的，普通人也能看懂。

拿完整的当前网址

如果只是想把整个页面的URL复制或传给后台，直接用window.location.href就行，这是最常用的属性。举个生活化的例子：你在奶茶店小程序里点单，选了“芋泥啵啵奶茶”，页面跳转到确认页，这时候要把“你点的是芋泥啵啵奶茶，页面链接是xxx”发给客服，就可以用这个属性拿到完整链接，不用手动复制地址栏的文字。

比如在浏览器控制台（按F12就能打开）输入console.log(window.location.href)，回车后就能看到当前页面的完整URL，像https://www.naicha.com/order?drink=yunini这种，连后面带的参数都包含在内。

拆分网址的不同部分

有时候我们不需要整个链接，只需要域名或者路径这些部分，location对象的其他属性就能帮我们拆分，就像把一杯奶茶拆成茶底、配料、杯子一样：

• location.host：相当于网址的“域名部分”，比如www.naicha.com，用来区分是哪个网站，比如你要判断是不是从自家小程序跳过来的，就可以用这个属性对比。
• location.pathname：是网址的“页面路径”，比如/order，用来区分当前在网站的哪个页面，比如订单页、个人中心页，你要统计用户在哪个页面停留最久，就可以拿这个值来分类。
• location.search：是网址里的“参数部分”，就是地址栏里?后面的内容，比如?drink=yunini，用来带额外信息，比如刚才的点单页面，用参数记录用户选的饮品，这个属性能直接拿到整个参数串。

举个生活例子：你要统计“多少用户点了芋泥奶茶”，就可以拿location.search拿到参数里的drink=yunini，然后统计这个参数出现的次数，不用把整个网址都分析一遍。

实用小技巧：处理参数的小工具

刚才说的location.search是?后面的整串，但如果要单独拿某个参数的值，比如只拿drink对应的yunini，可以写个简单的小方法，不用自己拆分字符串。比如用URLSearchParams这个浏览器自带的小工具，代码大概是：

`javascript

const params = new URLSearchParams(window.location.search);

const drink = params.get('drink');

`

这个方法就像用奶茶店的点单系统直接查“饮品”，不用自己手动数&符号拆分参数，非常适合新手用，不容易出错。

最后要提醒大家，这些属性都是浏览器给的，只能拿到当前页面的URL，而且如果是跨域的情况，部分属性可能拿不到，但日常开发里的场景基本都能覆盖到。只要记住window.location这个核心对象，再按需选对应的属性，就能轻松搞定获取当前URL的需求，不用再纠结怎么手写复杂的正则或者字符串拆分了。