URL、URLSearchParams 与编码

本节先让 URL 和 URLSearchParams 处理空格、重复键与 Unicode，再比较手写字符串的错误。

const url = new URL('/search?q=前端&tag=a&tag=b', 'https://example.test')
console.log(url.searchParams.get('q'), url.searchParams.getAll('tag'))
url.searchParams.set('q', 'DOM 事件')
console.log(url.href)

预期 getAll('tag') 保留两个值；写回 URL 时由平台完成编码。

规则与边界

• 平台保证、浏览器实现和业务约定必须分开；一个浏览器中的结果不能自动推广到所有宿主。
• 每个监听器、请求、观察器、缓存和焦点操作都要有清理/取消责任；页面或组件离开后不能继续写状态。
• 用户输入、URL、HTML、消息和持久化数据按不同信任边界处理；类型正确不代表内容可信。
• 失败、取消、超时、权限拒绝、配额不足和不支持要有不同的可观察结果。

机制拆解

URL 解析应交给 URL 和 URLSearchParams，不要用字符串拼接猜测编码、端口或 hash。searchParams.set 会正确编码空格和 Unicode，但重复键需要用 getAll 保留全部值。

可运行实验

const url = new URL('/search?q=前端&tag=a&tag=b', 'https://example.test')
console.log(url.origin, url.pathname, url.searchParams.get('q'))
console.log(url.searchParams.getAll('tag'))
url.searchParams.set('q', 'DOM 事件')
console.log(url.href)

比较手写 '?q=' + value 与 URLSearchParams 的结果，特别记录空格、& 和中文值的编码差异。

练习

1. 输入空格、&、中文和重复键，写出 get、getAll 与最终 URL。
2. 把页码设为 0、负数和非数字，写出统一回退规则。
3. 说明手写字符串拼接会在哪些字符上破坏编码。 查看本节答案

下一步

完成答案核对后继续本章下一篇，并把实验日志保存在自己的项目中。