JS解析URL参数方法详解

本文深入解析了浏览器原生的 URLSearchParams 接口——一个比传统 split + reduce 更可靠、更简洁、自动处理编码解码的 URL 参数处理利器，涵盖多种初始化方式（字符串、URL 对象、普通对象）、安全读取（get/getAll/has/迭代器）、灵活转换为对象（兼顾单值与多值场景）、以及增删改查和序列化等核心操作，助你高效、健壮地应对各种 URL 查询参数需求。

URLSearchParams 是浏览器原生提供的、专门用于处理 URL 查询参数（query string）的接口，比手动 split + reduce 更可靠、更简洁，也天然支持编码解码。

创建 URLSearchParams 实例

可以直接传入查询字符串、URL 对象或 FormData 等多种格式：

• 传入字符串：new URLSearchParams("name=张三&age=25&city=%E4%B8%8A%E6%B5%B7")
• 传入 URL 对象的 search 属性：new URLSearchParams(new URL("https://example.com/?a=1&b=2").search)
• 传入对象（需注意：仅支持字符串值，且不递归处理嵌套）：new URLSearchParams({ a: "1", b: "2" })

常用读取方法

获取参数值时会自动解码（如 %E4%B8%8A → “上”），无需额外调用 decodeURIComponent：

• get(key)：返回第一个匹配值（字符串），key 不存在时返回 null
• getAll(key)：返回所有同名参数的值组成的数组，适合多选、重复参数场景
• has(key)：判断是否存在该参数
• keys() / values() / entries()：返回迭代器，可用于 for...of 或展开为数组

安全地转成普通对象

直接用 Object.fromEntries() 可一键转换，但要注意：若某 key 出现多次，后者会覆盖前者。如需保留全部值，建议用 reduce：

// 基础转换（单值优先）
const params = Object.fromEntries(new URLSearchParams(location.search));

// 多值兼容转换（返回数组，即使只有一个值）
const paramsAll = Array.from(new URLSearchParams(location.search).entries()).reduce((acc, [k, v]) => {
  acc[k] = acc[k] ? [...acc[k], v] : [v];
  return acc;
}, {});

修改与序列化

URLSearchParams 是可变对象，支持增删改，并能随时生成标准查询字符串：

• set(key, value)：设置/替换值（会覆盖已有同名项）
• append(key, value)：追加值（允许同名多值）
• delete(key)：删除指定参数
• toString()：生成编码后的查询字符串，可直接拼到 URL 后

例如：const p = new URLSearchParams(); p.append("tag", "js"); p.append("tag", "web"); console.log(p.toString()); // "tag=js&tag=web"

文中关于的知识介绍，希望对你的学习有所帮助！若是受益匪浅，那就动动鼠标收藏这篇《JS解析URL参数方法详解》文章吧，也可关注golang学习网公众号了解相关技术文章。