HTML5URLSearchParams怎么用_HTML5获取解析查询字符串方法汇总【介绍】

URLSearchParams 是浏览器原生解析查询字符串最靠谱的方式，不用正则、不依赖第三方库，兼容性也够用（chrome 49+、firefox 44+、safari 10.1+、edge 17+）。

怎么把 URL 查询字符串转成可操作的对象

直接传字符串或 URL 实例进去就行，它内部会自动解码（包括空格变空格、%2B 变 + 等），比手写 split("&") 安全得多：

const params = new URLSearchParams("name=张三&city=%E4%B8%8A%E6%B5%B7&age=25"); console.log(params.get("name")); // "张三" console.log(params.get("city")); // "上海"

• 传入 location.search 最常见：new URLSearchParams(location.search)
• 如果字符串开头带 ?（比如 ?a=1&b=2），URLSearchParams 能自动忽略；不带也没问题
• 别用 decodeURIComponent 预处理——它会把 + 当空格错解，而 URLSearchParams 内部按规范处理

get 和 getAll 的区别和使用场景

get 只取第一个同名参数值，getAll 返回数组——这在表单多选、复选框、重复参数时特别关键：

const params = new URLSearchParams("tag=js&tag=web&tag=api"); params.get("tag");    // "js" params.getAll("tag"); // ["js", "web", "api"]

• 后端返回的查询串可能含重复键（如 Filter=id:1&filter=status:active），这时必须用 getAll
• has("key") 比 get("key") !== NULL 更准确，因为值可能是空字符串
• toString() 会重新编码并拼接，结果可用于跳转或 fetch：window.location.search = params.toString()

IE 不支持怎么办？要不要 polyfill

IE 完全不支持 URLSearchParams，但强行 polyfill 有风险：

立即学习“前端免费学习笔记（深入）”；

• 社区常用 polyfill（如 url-search-params-polyfill）在 IE9 下对 % 编码处理不一致，可能导致中文乱码
• 如果项目已用 axios 或 fetch，它们内部的 params 配置是另一套逻辑，和 URLSearchParams 并不等价，混用容易出 bug
• 简单场景（只读、无重复键）可降级为手动解析：

  function parseQuery(q) {   return q.substring(1).split("&").reduce((o, kv) => {     const [k, v] = kv.split("=");     o[decodeURIComponent(k)] = decodeURIComponent(v || "");     return o;   }, {}); }

真正麻烦的是需要动态增删改查、还要保持编码正确、又得兼容老浏览器的场景——这时候不是选 API 的问题，是得先理清「谁控制 URL 的生成」：是前端路由？表单提交？还是后端重定向？搞错源头，光修 URLSearchParams 没用。