location对象是BOM核心，可读取解析修改URL而不刷新页面；支持href、protocol、hostname等属性拆解URL，推荐URLSearchParams解析query，用replaceState更新search或直接改hash，assign/replace/reload实现不同跳转方式。

JavaScript 中的 location 对象是 BOM（浏览器对象模型）的核心之一，它让你能读取、解析甚至修改当前页面的 URL，无需刷新就能更新地址栏——这对单页应用（SPA）、参数传递、锚点跳转等场景非常关键。

一、用 location 属性拆解 URL 各部分

假设当前页面 URL 是：
https://shop.example.com:3000/products/list?category=shoes&sort=price#top

你可以直接读取以下只读（或可写）属性获取结构化信息：

• location.href → 完整 URL 字符串（可赋值跳转）
• location.protocol → "https:"（含冒号）
• location.hostname → "shop.example.com"（不含端口）
• location.host → "shop.example.com:3000"（含端口）
• location.port → "3000"（默认端口如 80/443 时为空字符串）
• location.pathname → "/products/list"（路径部分）
• location.search → "?category=shoes&sort=price"（查询字符串）
• location.hash → "#top"（锚点，含 # 号）
• location.origin → "https://shop.example.com:3000"（协议+主机+端口，只读）

二、安全解析 query 参数（推荐用 URLSearchParams）

location.search 返回的是带问号的字符串，直接解析易出错。现代标准做法是用 URLSearchParams：

Alibabacloud Sdk Client Initialization For Java

在 Java 中初始化和管理阿里云 SDK客户端。包括单例模式、线程安全、endpoint 与 region 配置、VPC 终端节点、同步与异步等。

下载

立即学习“Java免费学习笔记（深入）”；

const params = new URLSearchParams(location.search);
console.log(params.get('category')); // "shoes"
console.log(params.get('sort'));      // "price"
console.log(params.has('page'));      // false
<p>// 转为普通对象（可选）
const obj = Object.fromEntries(params);
// { category: "shoes", sort: "price" }

三、修改 URL 而不刷新页面

仅改 hash 或 search 且不触发刷新，需配合 history.replaceState()：

• 改哈希值（最简单）：location.hash = '#detail-123'; → 地址栏变，页面不刷新，会触发 hashchange 事件
• 改查询参数（推荐方式）：

  function updateSearch(key, value) {
    const url = new URL(location.href);
    url.searchParams.set(key, value);
    history.replaceState(null, '', url);
  }
  updateSearch('page', '2'); // URL 变为 ?category=shoes&sort=price&page=2
  

• ⚠️ 注意：直接赋值 location.search = '?id=5' 会强制刷新页面，不推荐

四、跳转与重载页面的三种方式

• location.assign(url)：加载新页面，保留历史记录，用户可点「后退」返回
• location.replace(url)：替换当前页面，不留下原页面记录，无法后退（适合登录跳转、错误页）
• location.reload()：
  • location.reload() → 从缓存加载（类似 F5）
  • location.reload(true) → 强制从服务器重新加载（类似 Ctrl+F5）

location 对象既是 window.location，也可简写为 location；它还同时是 document.location，三者指向同一对象。操作时注意跨域限制和浏览器兼容性（URLSearchParams 在 IE 中不支持，需 polyfill）。