如何获取URL参数详解

本文深入讲解了如何在现代Web开发中高效、安全地获取URL查询参数，重点推荐使用原生的URLSearchParams API——它语义清晰、自动处理编码解码、支持重复键和多种查询方法，大幅简化了传统字符串切割解析的繁琐与易错；同时全面剖析了浏览器兼容性（尤其IE需polyfill）、常见陷阱（如忘记处理?前缀、忽略key也可能被编码、非法编码未捕获异常）、SPA路由下参数监听的正确姿势，以及本地file://协议无法读取参数这一极易被忽视的开发环境限制，为开发者提供了一套即开即用、兼顾健壮性与可维护性的实践方案。

URLSearchParams 解析最直接，但要注意浏览器兼容性

现代浏览器里，URLSearchParams 是解析 URL 参数最干净的方式，不用自己切字符串、解码或处理重复键。它原生支持 get()、getAll()、has() 等方法，语义清晰。

在 index.html 的内联脚本或外部 JS 中可以直接用：

const params = new URLSearchParams(window.location.search);
const id = params.get('id'); // ?id=123 → '123'
const tags = params.getAll('tag'); // ?tag=a&tag=b → ['a', 'b']

注意：IE 完全不支持 URLSearchParams，如果必须兼容 IE，得用 polyfill 或手写解析函数；Chrome 49+、Firefox 44+、Safari 10.1+ 均支持。

window.location.search 返回的是带 ? 的字符串，别忘了截掉

window.location.search 拿到的是类似 ?name=张三&city=%E5%8C%97%E4%BA%AC 这样的完整查询串，开头的 ? 是包含在内的。直接传给 URLSearchParams 没问题，它会自动忽略；但如果手写解析，常见错误是没去掉 ? 就直接 .split('&')，导致第一个键名多出一个 ?。

手写 fallback 示例（仅作参考，非推荐）：

function getQueryParams() {
  const search = window.location.search.substring(1); // 删掉 ?
  return search.split('&').reduce((acc, pair) => {
    const [k, v] = pair.split('=').map(decodeURIComponent);
    acc[k] = v;
    return acc;
  }, {});
}

这个写法不处理重复 key、不校验格式、不支持数组语法，只适合极简场景。

参数值默认是 URL 编码的，URLSearchParams 自动 decode，手动解析时别漏掉

中文、空格、特殊符号在 URL 里都会被编码，比如 城市=北京 实际是 %E5%8C%97%E4%BA%AC。用 URLSearchParams.get() 会自动调用 decodeURIComponent，返回可读字符串；但如果你用 split + split 手动取值，必须显式调用 decodeURIComponent()，否则得到的是乱码或 %xx 字符串。

容易踩的坑包括：

• 只对 value 调用 decodeURIComponent，忘了 key 也可能含编码（虽然少见）
• 没包 try/catch，遇到非法编码如 %zz 会直接抛 URIError
• 在服务端渲染或 SSR 场景下误用 window 对象（此时应由后端解析或用 document.URL 配合逻辑判断）

页面加载后立即读取，但注意 SPA 路由可能不触发刷新

在纯静态 index.html 中，URL 改变靠用户直接输入或 a 标签跳转，window.location.search 在页面加载时就已固定，脚本放