1. HTML5 URL API到底能干什么？理解核心能力
在现代 Web 应用中，URL 是前端与后端交互的桥梁。HTML5 URL API 让你在浏览器端以对象的方式处理 URL，而不是拼接字符串。
通过 URL API 可以实现 解析、组合、编码、重定向和查询字符串管理 等常见需求，极大地提升代码的可维护性。
此外，URL.createObjectURL 与 URL.revokeObjectURL 提供了在本地 Blob/File 资源上生成临时 URL 的能力，方便媒体预览与离线资源处理。
// 解析一个相对 URL，基于一个基准 URL 构造完整 URL
const url = new URL('/path', 'https://example.com');
console.log(url.href); // https://example.com/path
console.log(url.origin); // https://example.com
console.log(url.pathname); // /path
console.log(url.searchParams.get('query')); // null
// 使用 createObjectURL 为 Blob 生成一个临时 URL
const blob = new Blob(['Hello world'], { type: 'text/plain' });
const blobUrl = URL.createObjectURL(blob);
console.log(blobUrl); // blob:https://.../abcdef
URL.revokeObjectURL(blobUrl); // 使用完毕后释放资源
2. URL 构造与解析的核心对象
在 API 层面，主要有两个核心对象：URL 与 URLSearchParams。前者用于完整的 URL 解析与构造，后者专门用于查询参数的增删改查。
URL 对象包含多个属性，如 href、origin、protocol、username、password、host、hostname、port、pathname、search、hash，以及一个方便的方法 toString，可以把对象还原为字符串 URL。
URLSearchParams 提供了链式操作的能力，支持 append、set、get、delete、has 等方法，并且是可迭代的。
2.1 URL 构造函数详解
使用 new URL(input, base) 的方式，可以将相对 URL 解析成完整 URL。若 input 为绝对 URL，base 将被忽略。
const url1 = new URL('/path', 'https://example.com/base/');
console.log(url1.href); // https://example.com/base/path
const url2 = new URL('https://example.org/a?b=2');
console.log(url2.pathname); // /a
2.2 URLSearchParams 的强大
借助 URLSearchParams，可以像操作普通对象一样管理查询参数，但它会在序列化时自动进行正确的编码。
const params = new URLSearchParams();
params.append('q', 'URL API');
params.append('page', '1');
params.set('sort', 'asc');
console.log(params.toString()); // q=URL%20API&page=1&sort=asc
3. 实战场景：从解析到构造URL的完整流程
下面通过实际案例，展示如何从解析 URL 到重新构造带查询参数的新 URL 的完整流程。
利用 URL 对象，可以把任意一个 URL 拆分成各个字段，并在需要时重新组合成新的 URL。
3.1 从完整 URL 拆解字段
完整 URL 包含多个字段：协议、域名与端口、路径、查询字符串、哈希。使用 URL 对象可以直观地访问这些字段。
const u = new URL('https://example.com:8080/path/name?q=search#frag');
console.log(u.origin); // https://example.com:8080
console.log(u.protocol); // https:
console.log(u.hostname); // example.com
console.log(u.port); // 8080
console.log(u.pathname); // /path/name
console.log(u.searchParams.get('q')); // search
console.log(u.hash); // #frag
通过这些字段，可以实现基于路由的条件判断、权限校验以及日志记录等逻辑。
3.2 将键值对组装回查询字符串
当需要动态添加或修改查询参数时，直接操作 URLSearchParams，再把结果赋回 URL 即可保持编码正确。
const base = 'https://example.com/search';
const url = new URL(base);
const data = { q: 'html5 url', page: 2, sort: 'desc' };
Object.keys(data).forEach(k => url.searchParams.set(k, data[k]));
console.log(url.href); // https://example.com/search?q=html5%20url&page=2&sort=desc
3.3 使用相对 URL 的解析
相对 URL 需要一个基准基址来完成解析，这在前端路由或资源链接中非常常见。
const base = new URL('https://example.com/app/');
const rel = new URL('../images/logo.png', base);
console.log(rel.href); // https://example.com/images/logo.png
4. URL.createObjectURL 与 blob URL 的应用
除了常规的 URL 构造，URL API 还提供了与本地资源交互的能力，即通过 Blob 或 File 生成一个临时 URL。
4.1 创建 Blob/File URL
通过 URL.createObjectURL 可以把一个 Blob 对象转换成一个可访问的 URL，常用于图片预览、音视频播放等场景。
const blob = new Blob(['这是一个文本'], { type: 'text/plain' });
const url = URL.createObjectURL(blob);
console.log(url); // blob:https://.../abcdef
4.2 资源回收与内存管理
使用完 Blob URL 后，应调用 URL.revokeObjectURL 来释放内存。
// 使用完成后释放资源
URL.revokeObjectURL(url);
5. 安全性与兼容性注意点
5.1 编码与信任的 URL
在构造包含用户输入的 URL 时，避免直接拼接字符串，优先使用 URLSearchParams 或 URL 构造函数，以确保参数会被正确编码，防止注入风险。
// 安全地添加查询参数
const safe = new URL('https://example.com/search');
safe.searchParams.set('q', userInput); // 浏览器会进行正确编码
console.log(safe.toString());
5.2 浏览器兼容性与 polyfills
大多数现代浏览器都原生支持 URL API、URLSearchParams、以及 blob URL。对旧版浏览器可考虑使用 polyfill 或降级策略。
if (!window.URL || !window.URLSearchParams) {// 引入 polyfill 的示例伪代码// import 'url-polyfill';
}
6. 进阶用法：URL API 与单页应用
在单页应用中，URL API 可以帮助实现更清晰、可维护的路由参数处理，同时避免直接字符串拼接带来的错误。
6.1 路由参数与历史 API
在单页应用中，结合 URL 和浏览器历史 API，可以实现不刷新页面的路由切换。
const base = new URL(window.location.href);
base.searchParams.set('page', '3');
history.pushState(null, '', base.pathname + '?' + base.searchParams.toString());
6.2 与 fetch 一起使用
通过将构造好的 URL 传给 fetch，可以实现带参数的网络请求，而不需要手动拼接查询字符串。
const url = new URL('https://example.com/api/items');
url.searchParams.set('limit', 20);
fetch(url).then(res => res.json()).then(data => console.log(data));
