DevToolkit Pro

什么是 URL 编码

URL 编码（URL Encoding），也称为百分号编码（Percent-Encoding），是一种将特殊字符转换为 % 加两位十六进制数字的编码方式，在线 url encoder 可以帮你瞬间完成。例如，空格编码为 %20，中文"你"编码为 %E4%BD%A0。

URL 编码的目的是确保 URL 中只包含安全的 ASCII 字符，避免特殊字符破坏 URL 结构。

为什么需要 URL 编码

1. 安全传输：URL 中的特殊字符（如 ?、&、=）有特殊含义，必须编码
2. 中文支持：浏览器地址栏不直接支持非 ASCII 字符
3. 表单提交：HTML 表单的 application/x-www-form-urlencoded 格式需要编码
4. 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. 查询参数编码

对查询参数的值进行编码，保留 ?、&、= 等结构字符（用 url params parser 可以检查编码后的结果）：

原始：https://example.com/search?q=hello world&lang=zh-CN
编码：https://example.com/search?q=hello%20world&lang=zh-CN

如何使用在线 URL 编解码工具

使用 DevToolkit Pro 的 URL 编解码工具：

编码

1. 输入原始文本或 URL
2. 选择编码模式（URL 编码 / 组件编码）
3. 点击 Encode 按钮
4. 复制编码后的结果

解码

1. 输入编码后的文本
2. 点击 Decode 按钮
3. 还原的原始文本出现在输出框

编码模式区别

| 模式 | 说明 | 适用场景 | |------|------|---------| | 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 提供。更多开发者工具请访问 首页。