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 总是以 / 开头,且不以 / 结尾(除非是根路径 /)。直接赋值时,如果漏掉开头斜杠,会被当成相对路径处理,导致意外结果。
立即学习“Java免费学习笔记(深入)”;
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 本身。











