urlsearchparams 是现代浏览器解析查询字符串的最直接方式，自动处理开头的 ?，支持 get() 和 getall()，但不兼容 ie；ie 需手写 parsequery 并 try/catch decodeuricomponent；spa 中需监听路由变化而非仅初始化时解析。
URLSearchParams 是最直接的解析方式
现代浏览器（Chrome 49+、Firefox 44+、Edge 17+）原生支持 URLSearchParams，它专为解析查询字符串设计，比手写正则或 split() 更可靠。
常见错误是直接对 window.location.search 调用 get() 而不剔除开头的 ? —— 实际上 URLSearchParams 构造函数会自动处理，无需手动截取。
-
new URLSearchParams(window.location.search)即可创建实例，window.location.search本身带?没关系 - 获取单个值：
params.get('id')，返回null而非undefined，注意判空逻辑 - 获取多个同名参数：
params.getAll('tag')，返回数组，不是字符串拼接 - 不支持 IE，若需兼容，必须降级方案（见下一条）
IE 兼容：手写 parseQuery 函数要避开 decodeURIComponent 报错
IE11 及更早版本不支持 URLSearchParams，但自己实现时容易在调用 decodeURIComponent 时抛出 URIError: malformed URI sequence —— 原因是 URL 中可能含非法编码字符（如被截断的 UTF-8 字节序列）。
安全做法是包裹 try/catch，并 fallback 到原始未解码值：
function parseQuery() {
const search = window.location.search.slice(1);
if (!search) return {};
return search.split('&').reduce((acc, pair) => {
const [key, val] = pair.split('=');
if (!key) return acc;
try {
acc[decodeURIComponent(key)] = decodeURIComponent(val || '');
} catch (e) {
acc[key] = val || '';
}
return acc;
}, {});
}
- 必须对
key和val分别try/catch，不能只包一层 - 不要用
eval或JSON.parse处理 query，它不是 JSON 格式 - 空值情况（如
?name=&id=123）中val为''，需保留而非忽略
Vue/React 项目里别在 mounted/useEffect 里重复解析
单页应用中，路由变化不会刷新页面，window.location.search 在组件生命周期内始终不变。如果在 mounted（Vue 2）或 useEffect(() => {}, [])（React）里只读一次，后续 URL 参数更新将无法响应。
- Vue 3 + Vue Router 4：监听
useRoute().query响应式对象 - React + React Router v6：用
useSearchParams()Hook，返回[searchParams, setSearchParams] - 纯 JS 场景：监听
popstate事件，但注意它不触发 hash 或 search 变化，需配合hashchange或使用MutationObserver监听window.location（不可靠），更稳妥的是封装一个watchUrlQuery函数轮询location.search（间隔 50ms 内足够）
特殊字符和嵌套结构无法靠 URLSearchParams 直接还原
URLSearchParams 只做扁平键值对解析，它不理解 JSON、数组或对象嵌套。例如 ?filter={"type":"book","price":29.9} 中的 filter 值仍是字符串，需要额外 JSON.parse()；而 ?tags[]=js&tags[]=ts 这类 PHP 风格数组写法也不会自动转成数组。
- 服务端传复杂结构，建议统一用 JSON 字符串并约定 key 名（如
data），前端显式JSON.parse() - 避免依赖
[]后缀，前端解析时按 key 名硬编码规则（如所有以ids_开头的参数合并为数组） - 编码时务必用
encodeURIComponent，尤其对 JSON 字符串——否则{、"、:等会破坏 URL 结构
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
