searchParams.append 直接修改原 URL 对象，不返回新值；需通过 url.href 获取结果，且自动编码中文等特殊字符，重复 key 会追加而非覆盖。
searchParams.append 会直接修改原 URL 对象，不是返回新 URL
很多人以为 searchParams.append 像字符串拼接一样返回新值，实际它只是就地修改 URL 实例的查询部分。调用后必须显式读取 url.href 或 url.toString() 才能得到完整结果。
常见错误现象：const newUrl = url.searchParams.append('a', '1') —— 这样 newUrl 是 undefined，而 url.href 已被改写。
- 正确做法是先构造
URL对象，再调用append，最后取.href - 如果原始 URL 不含查询参数（如
https://a.com/path），append会自动添加? - 如果已有查询参数（如
https://a.com/path?x=1），append会在末尾追加&a=1，不会去重或覆盖
重复 key 时 append 会保留所有项，不自动去重
searchParams.append 的设计就是“追加”，和 set 行为不同。同一个 key 多次调用 append，会生成多个同名参数，例如 ?tag=web&tag=js&tag=html —— 浏览器和服务端都可能接收为数组，但并非所有后端框架默认支持。
使用场景：需要传递多值（如复选筛选项、标签列表）时合理；但想“更新单个值”时应改用 searchParams.set()。
立即学习“前端免费学习笔记（深入）”；
文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。
-
append('id', '123')→?id=123 -
append('id', '456')→?id=123&id=456 -
set('id', '456')→?id=456（覆盖前值）
中文或特殊字符必须由 URL 构造函数自动编码，别手动 encodeURI
URL 构造函数和 searchParams 内部已集成 encodeURIComponent 逻辑。传入中文、空格、&、= 等，它会自动处理。手动提前编码会导致双重编码（如 %25E4%25BD%25A0），服务端解码失败。
错误示例：params.append('q', encodeURI('前端开发')) —— 得到乱码；正确写法：params.append('q', '前端开发')，交给 URL 自己编。
- 只要用
new URL()初始化，后续所有append值都会被安全编码 - 直接操作
href字符串拼接则必须手动encodeURIComponent，但强烈不建议 - 注意：
searchParams.get()返回的是自动解码后的值，无需再decodeURIComponent
动态拼接多个参数时，避免反复 new URL()，优先复用实例
频繁创建 URL 对象有轻微开销，尤其在循环中。更高效的做法是初始化一次，然后批量 append 或 set，最后统一取 href。
性能影响虽小，但在高频操作（如搜索建议实时拼接、表格分页链接生成）中可感知；另外，复用还能避免因初始 URL 解析异常导致的重复错误。
- ✅ 推荐：
const url = new URL('https://api.example.com/list'); url.searchParams.append('page', '2'); url.searchParams.append('size', '20'); url.searchParams.set('sort', 'updated'); fetch(url.href); - ❌ 避免：
fetch('https://api.example.com/list?page=2&' + `size=${encodeURIComponent('20')}`)—— 手动拼、漏编码、难维护
url.href 获取最终字符串；直接打印 url 对象看不到查询参数变化，控制台显示的可能是初始状态快照。 
