index.html怎样获取URL里的参数？

URLSearchParams是现代浏览器解析URL查询参数最简洁可靠的方式，支持自动编解码、get/getAll/has等方法，但IE不支持，需polyfill；window.location.search含开头?，可直接传入。

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 在页面加载时就已固定，脚本放 <script> 里直接执行即可。

但如果项目用了 Vue Router（history 模式）、React Router 或其他前端路由，URL 变化不会重新加载 index.html，也就不会再次执行初始化脚本。这时需要监听路由变化：

// Vue Router 示例（非 hash 模式）router.afterEach(to => {  const params = new URLSearchParams(to.fullPath.split('?')[1] || '');  console.log(params.get('ref'));});

更稳妥的做法是把参数读取逻辑封装成函数，在路由守卫、组件 mounted 或自定义 hook 中按需调用，而不是只依赖页面首次加载。

真正容易被忽略的是：开发时本地双击打开 file:// 协议的 index.html，window.location.search 是空字符串，且无法通过地址栏加参数生效——必须走 HTTP 服务（如 http-server、Vite 预览、Nginx）才能让查询参数被浏览器识别。