什么是 URL 编码
URL 编码（URL Encoding），也称为百分号编码（Percent-Encoding），是一种将特殊字符转换为 % 加两位十六进制数字的编码方式。例如，空格编码为 %20，中文"你"编码为 %E4%BD%A0。
URL 编码的目的是确保 URL 中只包含安全的 ASCII 字符，避免特殊字符破坏 URL 结构。
为什么需要 URL 编码
- 安全传输：URL 中的特殊字符（如
?、&、=）有特殊含义，必须编码 - 中文支持：浏览器地址栏不直接支持非 ASCII 字符
- 表单提交：HTML 表单的
application/x-www-form-urlencoded格式需要编码 - API 调用：查询参数中的值需要编码以避免歧义
常见 URL 编码对照表
| 字符 | 编码 | 说明 |
|------|------|------|
| 空格 | %20 或 + | 最常见的编码 |
| & | %26 | 查询参数分隔符 |
| = | %3D | 键值对分隔符 |
| ? | %3F | 查询字符串起始符 |
| / | %2F | 路径分隔符 |
| # | %23 | 键锚点标识符 |
| % | %25 | 编码本身的特殊字符 |
| + | %2B | 加号（在查询字符串中 + 表示空格） |
URL 编码的两种场景
1. URL 路径编码
对 URL 的路径部分进行编码，保留 / 和路径结构：
原始：https://example.com/文档/入门指南.html
编码：https://example.com/%E6%96%87%E6%A1%A3/%E5%85%A5%E9%97%A8%E6%8C%87%E5%8D%97.html
2. 查询参数编码
对查询参数的值进行编码，保留 ?、&、= 等结构字符：
原始：https://example.com/search?q=hello world&lang=zh-CN
编码：https://example.com/search?q=hello%20world&lang=zh-CN
如何使用在线 URL 编解码工具
使用 DevToolkit Pro 的 URL 编解码工具：
编码
- 输入原始文本或 URL
- 选择编码模式（URL 编码 / 组件编码）
- 点击 Encode 按钮
- 复制编码后的结果
解码
- 输入编码后的文本
- 点击 Decode 按钮
- 还原的原始文本出现在输出框
编码模式区别
| 模式 | 说明 | 适用场景 |
|------|------|---------|
| URL 编码（encodeURIComponent） | 编码所有特殊字符，包括 / | 编码查询参数的值 |
| 路径编码（encodeURI） | 保留 /、:、@ 等 URL 结构字符 | 编码完整 URL |
编码示例
const url = 'https://example.com/path?q=你好世界';
// encodeURIComponent（编码参数值）
// 结果：https%3A%2F%2Fexample.com%2Fpath%3Fq%3D%E4%BD%A0%E5%A5%BD%E4%B8%96%E7%95%8C
// encodeURI（编码完整 URL）
// 结果：https://example.com/path?q=%E4%BD%A0%E5%A5%BD%E4%B8%96%E7%95%8C
Web 开发中的 URL 编码
HTML 表单
<form action="/search" method="GET">
<input name="q" value="hello world">
<!-- 提交时自动编码为：/search?q=hello+world -->
</form>
JavaScript fetch API
// 自动编码查询参数
const params = new URLSearchParams({
q: 'hello world',
lang: 'zh-CN'
});
fetch(`/search?${params}`);
后端接收
// Node.js Express
app.get('/search', (req, res) => {
const query = req.query.q; // 自动解码为 "hello world"
});
FAQ
URL 编码和 Base64 编码有什么区别？
URL 编码保留 URL 结构，只编码特殊字符和非 ASCII 字符。Base64 是通用的二进制到文本编码，编码后的字符串包含 +、/、= 等 URL 不友好的字符。URL 场景中应使用 URL 编码。
为什么空格有时编码为 %20，有时为 +？
在 URL 路径中，空格编码为 %20。在查询字符串的 application/x-www-form-urlencoded 格式中，空格编码为 +。两种格式在不同上下文中使用。
编码后的 URL 还能正常访问吗？
可以。浏览器和服务器都支持 URL 编码，会自动解码。编码后的 URL 是完全有效的。
本文由 DevToolkit Pro 提供。更多开发者工具请访问 首页。