URL 编码与查询字符串：实用指南

URL 的路径和查询部分只允许使用有限的字符集，其余所有字符都必须进行百分号编码（例如：空格 → %20，& → %26）。处理不当会导致 404 错误、统计标签失效以及难以察觉的 API 缺陷。

哪些内容需要编码？

• 包含空格、&、=、# 或非 ASCII 文本（如表情符号、带重音的字符）的查询参数值必须进行编码。
• 含有斜杠或特殊字符的路径段同样需要编码——否则路由器会误判路径段的分隔位置。

浏览器通常在地址栏中显示"美化"后的 URL，但实际传输时发送的是编码形式。而 API 则要求在手动拼接字符串时显式进行编码。

encodeURIComponent 与 encodeURI 的区别

在 JavaScript 中：

• encodeURIComponent — 用于查询参数的值（通常也用于键）。它会对几乎所有可能破坏 URL 结构的字符进行编码。
• encodeURI — 仅在需要保留 ? 和 # 等分隔符时，才用于对整个 URL 进行编码。在日常 API 开发中较少使用。

const q = "hello world & friends";
const params = new URLSearchParams({ q });
console.log(params.toString()); // q=hello+world+%26+friends

URLSearchParams 可自动处理标准 application/x-www-form-urlencoded 格式的查询字符串编码，推荐使用它代替手动字符串拼接。

构建包含多个参数的 URL

当添加 UTM 标签、筛选条件或 API 密钥时，很容易出现各种错误：重复的 ?、未编码的 & 或参数顺序混乱。使用一个小工具——或可视化构建器——能确保最终字符串始终合法。

试试我们的 URL Encode / Decode 工具，直观查看字符串的编码变化；也可使用 URL & Query String Builder 来拼装支持 UTF-8 安全编码的完整链接。

cURL 与 fetch

从浏览器开发者工具中复制请求时，请注意查询字符串可能已经过编码。将其粘贴到代码中有时会导致二次编码。我们的 cURL to fetch() 转换工具可帮助你将可用的 cURL 命令转换为 JavaScript 代码，同时方便你单独验证 URL。

如果某个链接"在 Chrome 中正常"但在脚本中报错，请逐字节对比原始查询字符串。

快速检查清单

• 在拼接 ?a=...&b=... 之前，先对参数值进行编码
• 优先使用 URL + URLSearchParams，而非手动拼接字符串
• 对于国际化域名（IDN），浏览器会自动处理主机名中的 punycode 转换——将编码重心放在路径和查询部分即可