JavaScript 用 URL 和 URLSearchParams 接口安全解析、构造 URL:URL 解析结构化信息,URLSearchParams 操作查询参数并自动编码,IE 需 polyfill。

JavaScript 提供了原生的 URL 和 URLSearchParams 接口,让解析和构造 URL(尤其是查询参数)变得简单、可靠,无需正则或手动字符串切割。
用 URL 对象安全解析整个 URL
直接传入完整 URL 字符串,即可获取协议、主机、路径、查询字符串等结构化信息:
-
new URL('https://example.com/search?q=js&sort=desc#results')返回一个 URL 实例 -
url.hostname→'example.com' -
url.pathname→'/search' -
url.search→'?q=js&sort=desc'(含问号) -
url.hash→'#results'(含井号)
用 URLSearchParams 解析和操作查询参数
url.search 的值可直接传给 URLSearchParams,它专为查询字符串设计,支持增删改查:
const params = new URLSearchParams(url.search)-
params.get('q')→'js'(返回第一个匹配值) -
params.getAll('tag')→['web', 'front'](支持重复键) -
params.set('page', '2')→ 覆盖已有值;params.append('tag', 'learn')→ 追加新项 -
params.delete('sort')→ 移除键 -
params.toString()→ 生成标准编码后的查询字符串:'q=js&page=2&tag=web&tag=front&tag=learn'
构造带参数的新 URL(推荐方式)
不要拼接字符串。先创建基础 URL,再用 URLSearchParams 构建查询部分,最后赋值:
立即学习“Java免费学习笔记(深入)”;
const url = new URL('https://api.example.com/data')const params = url.searchParamsparams.set('limit', '10')params.set('offset', '20')params.set('filter', 'active')- 此时
url.href已是'https://api.example.com/data?limit=10&offset=20&filter=active'
注意编码与兼容性
URLSearchParams 自动处理 UTF-8 编码(如中文、空格、特殊符号),你传入原始值即可:
-
params.set('q', '前端 开发')→ 自动转为'q=%E5%89%8D%E7%AB%AF+%E5%BC%80%E5%8F%91' - IE 不支持
URL和URLSearchParams,需用 polyfill 或降级方案(如第三方库query-string) - 服务端接收时,确保正确解码(现代框架通常自动处理)










