URL 编码完全指南：为什么 URL 中的中文会变成 %E4%B8%AD

问题的起源

你一定见过这样的 URL：

``

https://www.baidu.com/s?wd=%E4%BA%BA%E5%B7%A5%E6%99%BA%E8%83%BD

`

其中 %E4%BA%BA%E5%B7%A5%E6%99%BA%E8%83%BD 就是"人工智能"四个汉字经过 URL 编码后的结果。这种编码方式被称为 百分号编码（Percent-encoding），也就是通常说的 URL 编码（URL Encoding）。

为什么需要 URL 编码？

URL 的规范（RFC 3986）规定，URL 只能包含以下几类字符：

• 未保留字符（直接使用）：字母（A-Z、a-z）、数字（0-9）、以及 -、_、.、~
• 保留字符（在特定位置有特殊含义）：:、/、?、#、[、]、@、!、$、&、'、(、)、*、+、,、;、=

对于其他所有字符（包括中文、空格、特殊符号等），都必须通过 URL 编码进行转义，才能安全地出现在 URL 中。

URL 编码的规则

URL 编码的规则非常简单：

1. 找到要编码字符的 UTF-8 字节序列

2. 将每个字节用 % 号加上两位大写十六进制数表示

例如，汉字"中"：

• UTF-8 编码为：0xE4、0xB8、0xAD（三个字节）
• URL 编码结果：%E4%B8%AD

空格（ASCII 0x20）：

• URL 编码结果：%20（或在表单数据中用 + 号替代）

encodeURI 和 encodeURIComponent 的区别

JavaScript 提供了两个内置函数用于 URL 编码，很多开发者会将二者混淆：

encodeURI()：用于编码完整的 URL。它不会对 URL 中具有特殊结构意义的字符（如 :、/、?、&、=、#）进行编码。 `javascript

encodeURI('https://woshiit.com/search?q=人工智能&page=1')

// → 'https://woshiit.com/search?q=%E4%BA%BA%E5%B7%A5%E6%99%BA%E8%83%BD&page=1'

` encodeURIComponent()：用于编码 URL 的某一个组成部分（如查询参数的值）。它会把几乎所有特殊字符都进行编码，包括 :、/、?、&、= 等。 `javascript

encodeURIComponent('https://woshiit.com/search?q=人工智能')

// → 'https%3A%2F%2Fwoshiit.com%2Fsearch%3Fq%3D%E4%BA%BA%E5%B7%A5%E6%99%BA%E8%83%BD'

` 使用场景对比：

|------|---------|

场景	使用函数
对整个 URL 编码	encodeURI()
对 URL 参数的值编码	encodeURIComponent()
拼接 URL 参数	encodeURIComponent()

常见的 URL 编码场景

构建带中文参数的 API 请求： `javascript

const keyword = '人工智能';

const url = https://api.example.com/search?q=${encodeURIComponent(keyword)};

` 在 CSS 中嵌入 SVG 图像：

SVG 字符串中含有 <、>、# 等字符，需要 URL 编码才能用在 url() 中：

`css

background-image: url("data:image/svg+xml,%3Csvg xmlns='http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'...");

` 处理用户输入的搜索关键词：

在构建搜索功能时，用户输入的关键词可能包含特殊字符，必须使用 encodeURIComponent()` 进行处理后再拼接到 URL 中。

在线 URL 编码工具

如果你需要快速对文字或 URL 进行编码/解码，可以使用我们提供的 URL 编码/解码工具，支持选择编码模式（完整 URL 或 URI 组件），并能智能处理已经被编码过的字符串。