使用 URL 和 URLSearchParams对象 可安全高效地解析、构建和操作 URL。通过 new URL()可解析完整 URL 的各部分，如 origin、host、pathname、search 等，并支持以基础 URL 创建新地址；URLSearchParams 用于处理查询参数，提供 get、set、has、append 等方法，避免手动拼接错误；浏览器 中可通过 window.location 获取或跳转页面，node.js中可用 require(‘url’) 模块实现跨平台复用；需注意使用 encodeURIComponent编码 用户输入，避免 xss 风险，推荐始终使用原生 API 而非 字符串 拼接，确保安全性与正确性。
在 javaScript 中处理 URL 是 前端 开发中的常见需求，无论是解析查询参数、动态构建链接，还是处理跨域请求，都需要对 URL 进行操作。现代 浏览器 提供了原生 API 来简化这些任务，让开发者可以更安全、高效地处理网络地址。
使用 URL 对象解析和构造 URL
javascript的 URL 构造函数 是处理 URL 的核心 工具。它能将一个完整的 URL 字符串解析为结构化对象，也可以用于从各部分拼接生成新的 URL。
例如：
let url = new URL(‘https://example.com:8080/path/page?name=alice&age=25#section1’);
通过这个对象，你可以直接访问以下属性：
立即学习“Java 免费学习笔记（深入）”；
- url.origin → ‘https://example.com:8080’
- url.protocol → ‘https:’
- url.host → ‘example.com:8080’
- url.pathname → ‘/path/page’
- url.search → ‘?name=alice&age=25’
- url.hash → ‘#section1’
你也可以用它创建新 URL：
let newUrl = new URL(‘/api/data’, ‘https://myapp.com’); // 结果：https://myapp.com/api/data
处理查询参数：URLSearchParams
查询字符串（search params）常用于传递数据。手动解析容易出错，推荐使用 URLSearchParams 接口。
获取当前页面的参数：
let params = new URLSearchParams(window.location.search); let name = params.get(‘name’); // 获取 name 值 let age = params.get(‘age’); // 获取 age 值
常用方法包括：
- get(key)：获取第一个匹配值
- getAll(key)：获取所有同名参数（如多选框）
- has(key)：判断是否存在该参数
- append(key, value)：添加新参数
- set(key, value)：设置或更新参数
- delete(key)：删除参数
- toString()：返回 编码 后的查询字符串
示例：动态构建查询串
let searchParams = new URLSearchParams(); searchParams.append(‘q’, ‘javascript‘); searchParams.append(‘sort’, ‘date’); fetch(‘/search?’ + searchParams.toString());
在不同环境中处理 URL
在浏览器中，可以直接使用 window.location 获取当前页面 URL 信息，并可修改以跳转页面：
window.location.href = ‘https://newsite.com’; window.location.reload(); // 重新加载
在 Node.js等服务端 JavaScript 环境，虽然没有 window 对象，但可以使用内置的 url 模块（CommonJS）或全局 URL 支持（ES 模块）：
const {URL} = require(‘url’); let myUrl = new URL(‘https://api.com/v1/users?limit=10’);
这使得同一套逻辑可以在前 后端 复用。
注意编码与安全性
用户输入的 URL 或参数可能包含特殊字符，必须正确编码：
- 使用 encodeURIComponent() 编码单个参数值
- 避免手动拼接 URL，优先使用 URL 或 URLSearchParams 对象
- 防止 XSS 攻击：不要将未验证的 URL 直接插入 dom 或跳转
错误示例（应避免）：
// 危险！可能引发 XSS location.href = ‘https://example.com?next=’ + userProvidedUrl;
正确做法：
let safeUrl = new URL(‘/safe-path’, ‘https://trusted.com’); safeUrl.searchParams.set(‘next’, encodeURIComponent(userProvidedUrl));
基本上就这些。熟练掌握 URL 和 URLSearchParams，能让网络请求更清晰、安全，减少低级错误。不复杂但容易忽略细节。
