怎样使用JavaScript操作URL_如何解析和构造查询参数

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 构建查询部分，最后赋值：

• const url = new URL('https://api.example.com/data')
• const params = url.searchParams
• params.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）
• 服务端接收时，确保正确解码（现代框架通常自动处理）