location.search和hash属性分别用于解析URL查询参数和锚点状态，需解码并结构化数据；search用URLSearchParams自动处理，hash需按约定解析，二者常组合使用且修改时注意跳转与历史栈影响。
location对象的search和hash属性是解析URL中查询参数和锚点状态最直接的方式，关键在于正确提取、解码和结构化数据。
用search提取并解析查询参数
location.search返回以?开头的字符串，比如?name=张三&age=25。需要去掉?再按&和=拆分，注意用decodeURIComponent处理编码字符（如空格、中文）。
- 直接取原始值：location.search.slice(1) 去掉开头的?
- 转成对象推荐写法：
Object.fromEntries(new URLSearchParams(location.search))
—— 简洁且自动解码，兼容现代浏览器 - 兼容旧环境可手写解析：
用split('&')切对，再split('=', 2)防值含等号，逐个decodeURIComponent
用hash读取和更新路由状态
location.hash返回以#开头的字符串，常用于单页应用的前端路由或滚动定位，例如#/user?id=100或#modal=edit&tab=profile。它不触发页面刷新，适合轻量状态管理。
- 获取纯hash内容：location.hash.slice(1) 或 location.hash.substring(1)
- 若hash里含类似query的参数（如#a=1&b=2），可用和search相同方式解析，但需先确认格式是否约定为键值对
- 更新hash用location.hash = 'new-value'，会触发hashchange事件，可监听做响应
search与hash组合使用的典型场景
实际项目中二者常共存：search承载服务端可识别的资源参数（如分页、筛选），hash承载客户端内部状态（如折叠面板、编辑模式）。例如：/list?category=book#tab=recent&preview=true。
立即学习“Java免费学习笔记（深入）”；
- 解析时分开处理，避免混淆 —— search走URLSearchParams，hash按业务约定解析（可能也是URLSearchParams，也可能JSON字符串）
- 修改时注意副作用：改search会刷新页面（除非用pushState），改hash不会；但两者都影响浏览器历史栈
- 路由库（如Vue Router、React Router）底层正是封装了这些逻辑，手动实现时建议统一抽象为parseUrlState()函数
注意事项和常见陷阱
看似简单，但容易出错的地方集中在编码、边界和同步上。
- 中文、空格、特殊符号必须解码，否则%E4%BD%A0%E5%A5%BD会原样保留
- search为空时location.search是空字符串，不是null；hash为空时是""，不是undefined
- 直接赋值location.hash或location.search会跳转，如需静默更新，优先用history.pushState() + 手动更新location对象（仅限当前origin）
