URLSearchParams可直接解析location.search获取参数，自动处理编码；哈希参数需先截取问号后部分；服务端渲染应注入全局变量或meta标签传参；IE11需轻量polyfill。
URL 参数怎么用 URLSearchParams 拿到
浏览器地址栏里的 ?id=123&name=test 这种参数，直接用 URLSearchParams 解析最稳，不用自己切字符串或正则。它原生支持、兼容性好（Chrome 49+、Firefox 44+、Safari 10.1+），而且能自动处理编码问题。
常见错误是手动 location.search.slice(1).split('&')，结果遇到空格、中文、加号就乱码或漏值。
-
const params = new URLSearchParams(location.search)—— 构造时传入整个location.search（含问号） -
params.get('id')返回字符串，不存在时返回null，不是undefined -
params.getAll('tag')用于重复键，比如?tag=a&tag=b - 别用
params.toString()回写 URL，它不保留原始顺序，且会二次编码，要拼新 URL 请用new URL()
location.hash 里的参数不能用 URLSearchParams 直接解
如果参数在哈希里，比如 page.html#id=123&mode=edit，location.search 是空的，得先取 location.hash，再手动去掉开头的 # 才能喂给 URLSearchParams。
-
const hashParams = new URLSearchParams(location.hash.slice(1))—— 注意.slice(1)去掉# - 如果哈希里混着路由路径（如
#/user/123?from=home），URLSearchParams会把整个/user/123?from=home当作键名，必须先提取问号后部分 - 更安全的做法：
const q = location.hash.split('?')[1]; const params = q ? new URLSearchParams(q) : new URLSearchParams()
服务端渲染页面传参？别依赖 JS 解析 URL
如果 HTML 是后端吐出来的（比如 PHP、Node.js 模板），参数其实早就知道，硬要在前端再从 URL 解一遍，既多一次解析，又容易和后端逻辑脱节。
立即学习“前端免费学习笔记（深入）”；
- 后端可以往页面里注入一个全局变量：
window.__INITIAL_PARAMS__ = {"id":123,"lang":"zh"} - 或者写进
标签：，然后 JS 用document.querySelector('meta[name="params"]').getAttribute('content')拿 - 这样做避免了 URL 编码/解码错位，也绕开了单页应用路由（如 Vue Router 的
history模式）导致location.search为空的问题
IE 不支持 URLSearchParams 怎么办
IE11 完全不认这个 API，但你不需要引入整个 polyfill 库。一个 10 行以内的轻量 fallback 就够用：
if (!window.URLSearchParams) {
window.URLSearchParams = function(search) {
const obj = {};
if (search && search.startsWith('?')) search = search.slice(1);
search.split('&').forEach(pair => {
if (!pair) return;
const [k, v] = pair.split('=');
obj[decodeURIComponent(k)] = decodeURIComponent(v || '');
});
return {
get: k => obj[k],
getAll: k => obj[k] ? [obj[k]] : []
};
};
}
注意这个简易版只支持单值 get()，不支持 append() 或迭代器；如果项目里真要用到这些方法，再上 url-search-params-polyfill 包。
真正容易被忽略的是：有些老项目用了 history.pushState 改 URL 但没触发路由重载，此时 location.search 已变，但 JS 没重新执行解析逻辑——得监听 popstate 事件手动更新参数缓存。
