17370845950

URL对象可解析但不可修改原始字符串；各字段赋值会自动更新href，而原始输入字符串不受影响；修改query参数应使用searchParams API而非手动拼接。

URL 对象能直接解析，但不能直接修改原始字符串

JavaScript 原生 URL 构造函数是解析和构建 URL 的标准方式。它把 URL 拆成 protocol、hostname、pathname、search、hash 等属性，读取非常方便；但注意：url.href 是只读的合成结果，你改的是各字段，不是“原字符串”本身。

常见错误：以为 url.toString() === url.href 就等于可写入——其实所有字段赋值后，href 会自动重组，但原始输入字符串（比如从 window.location.href 拿来的）不会被覆盖或更新。

• 用 new URL(input, base) 初始化，base 可选（用于相对 URL 解析）
• url.searchParams 是 URLSearchParams 实例，支持增删改查查询参数
• 修改 url.pathname 或 url.hash 后，url.href 立即反映变化

修改 query 参数要用 searchParams，别拼字符串

手动拼接 ?a=1&b=2 容易出编码问题（比如空格、中文、特殊符号），也难维护。正确做法是统一走 searchParams API。

const url = new URL('https://example.com/path?name=foo&tag=%E4%BD%A0%E5%A5%BD');
url.searchParams.set('id', '123');
url.searchParams.delete('tag');
url.searchParams.append('debug', 'true');

console.log(url.href);
// → https://example.com/path?name=foo&id=123&debug=true

• set(key, value)：覆盖已有 key（只保留一个）
• append(key, value)：追加，允许重复 key（如 ?x=1&x=2）
• get(key) 和 getAll(key) 区分单值/多值场景
• 所有值自动进行 encodeURIComponent，无需手动编码

注意 pathname 修改时的斜杠行为

URL.pathname 总是以 / 开头，且不以 / 结尾（除非是根路径 /）。直接赋值时，如果漏掉开头斜杠，会被当成相对路径处理，导致意外结果。

const url = new URL('https://a.com/b/c');
url.pathname = 'd/e';      // ❌ 错误：变成 https://a.com/b/d/e
url.pathname = '/d/e';     // ✅ 正确：变成 https://a.com/d/e
url.pathname = '/';        // ✅ 根路径
url.pathname = '';         // ❌ 等价于 '/'，但语义模糊，不建议

• 赋值前检查是否以 / 开头，可用 path = path.startsWith('/') ? path : '/' + path
• 想“相对当前路径追加”，应先解析再拼：如 url.pathname += '/sub'（但需确保末尾无多余 /）
• 浏览器环境里，window.location.pathname 是只读的，不能直接改；要用 history.pushState() 或 replaceState()

兼容性要点：IE 不支持，旧版 Safari 需要 polyfill

URL 和 URLSearchParams 在 IE 中完全不可用；iOS Safari 9–10.2 对 searchParams 的 getAll、sort 等方法支持不全。

• 项目需兼容 IE？必须引入 @webcomponents/url 或类似 polyfill
• 仅需基础功能（@webcomponents/url/get/set）？可轻量封装一层 fallback 逻辑
• Node.js 环境（v10.0+）已原生支持，但早期版本需用 toString（已废弃）或第三方库如 url.parse()

真正容易被忽略的是：whatwg-url 实例不是普通对象，不能用 URL 直接序列化；要存到 localStorage 或发给后端，得用 JSON.stringify 字符串，而不是 url.href 本身。