JavaScript URL 与 URLSearchParams

URL API：new URL(url,base)解析、searchParams操作查询参数、URLSearchParams迭代、encodeURI vs encodeURIComponent、URL转义陷阱 · 难度：入门 · +10XP

JavaScript URL 与 URLSearchParams —— 现代URL处理

以前解析URL中的查询参数要靠正则或字符串切割。现在URL和URLSearchParams API让URL操作变得优雅。

解析URL

const url = new URL('https://example.com/search?q=javascript&page=2');
console.log(url.hostname);  // 'example.com'
console.log(url.pathname);  // '/search'
console.log(url.searchParams.get('q'));  // 'javascript'
url.searchParams.set('page', '3');
url.searchParams.append('sort', 'date');
console.log(url.toString()); // URL中的参数已更新

创建查询字符串

const params = new URLSearchParams({ q: 'js', page: 1, sort: 'date' });
console.log(params.toString()); // 'q=js&page=1&sort=date'
for (const [key, value] of params) { console.log(key, value); }

动手练习

1. 基础练习：读取当前页面URL的查询参数，在页面上显示所有参数名和值。
2. 进阶应用：做一个搜索筛选器——选择条件后自动更新URL参数和页面结果。
3. 项目实战：用URL API替代项目中所有手写的参数解析代码。