打开浏览器控制台，地址敲下 window.location.href，地址回车。地址当前页面的地址完整 URL 就出来了。这是地址最常用的一行代码，没有之一。地址做前端十来年，地址凡是地址跟地址栏打交道的地方，十有八九第一反应就是地址它。

但 location 对象远不止这一个属性。地址它下面挂着一堆东西，地址各有各的地址用处，很多人用了好几年也就只记得 href，地址其实挺可惜的地址。

拆开一个 URL 看看

假设当前地址是地址：

https://www.example.com:8080/path/page.html?uid=42&tab=info#section-3 

用 location 逐个拆：

• location.href → 完整地址，上面那一整串
• location.protocol → "https:"，注意带冒号
• location.hostname → "www.example.com"，不含端口
• location.port → "8080"，默认端口时返回空字符串
• location.host → "www.example.com:8080"，hostname + port
• location.pathname → "/path/page.html"，以斜杠开头
• location.search → "?uid=42&tab=info"，带问号
• location.hash → "#section-3"，带井号

这些属性都是可读可写的（href 除外，它也能写，但写它等于跳转）。改 location.hash 页面不会刷新，但会触发 hashchange 事件——做单页应用路由的老方案就靠这个。

拿到查询参数才是正经事

location.search 拿到的是原始字符串，实际开发中更常做的是解析出每个参数的值。早年间大家手写正则或者 split，现在有 URLSearchParams，干净得多：

const params = new URLSearchParams(location.search); params.get('uid'); // "42" params.get('tab'); // "info" params.has('page'); // false 

这玩意儿兼容性已经没问题了，IE 除外——但 2024 年了，谁还管 IE。它还能遍历、追加、删除，构造新对象时直接传字符串也行：

const p = new URLSearchParams('a=1&b=2'); for (const [key, value] of p) {  console.log(key, value); } 

有个坑提一嘴：URLSearchParams 会把 + 解析成空格。如果你的参数值里真的有加号，得先编码。我之前做一个分享链接功能时就踩过这个，用户传的 token 里带 +，后端解出来对不上，排查了半天。

跳转的几种姿势

改地址栏最直接的方式：

location.href = 'https://other.com'; location.assign('https://other.com'); // 效果一样 location.replace('https://other.com'); // 不产生历史记录 location.reload(); // 刷新当前页 

replace 和 assign 的区别值得记一下。assign 会在历史栈里加一条，用户点后退能回来；replace 是替换当前记录，后退直接跳过。登录成功后跳首页，一般用 replace，防止用户后退又回到登录页。

另外 location.reload(true) 这个传参的写法早就废弃了，别再用。强制从服务器拉取用 location.reload() 就行，缓存策略交给 HTTP 头控制。

一个实际场景

之前做过一个活动页，需要根据 URL 里的渠道参数展示不同文案。大概逻辑是这样：

const channel = new URLSearchParams(location.search).get('ch') || 'default'; const copyMap = {  default: '欢迎参加活动', wx: '微信用户专享', qq: 'QQ用户福利' }; document.querySelector('.title').textContent = copyMap[channel] || copyMap.default; 

简单粗暴，但管用。渠道参数丢了就展示默认文案，不至于白屏。

地址栏里的信息就这些，location 对象本身也不复杂。真正容易出问题的地方在于编码——中文参数、特殊字符、# 和 & 的转义。遇到拿不到值的情况，先 console.log(location.href) 看看浏览器实际把地址解析成了什么样，比瞎猜快得多。