URL编码详解：为什么特殊字符必须转义

什么是URL编码？

URL编码（也称为百分号编码）将URL中不允许或具有特殊含义的字符转换为可以安全传输的格式。编码形式使用百分号（%）后跟字符字节值的两位十六进制表示。

为什么URL需要编码

URL只能包含ASCII字符集中的有限字符集。此集合之外的字符以及某些在URL语法中具有特殊含义的保留字符必须进行编码。

保留字符

有些字符是“保留”的，因为它们在URL结构中具有特殊含义：

• ?：查询字符串分隔符
• &：参数分隔符
• =：键值分隔符
• #：片段标识符
• /：路径分隔符
• +：空格（在查询字符串中）
• @, :, !：各种协议用途

当这些字符作为数据（而非结构元素）出现时，必须进行编码。

不安全字符

不编码就无法安全传输的字符：

• 空格：编码为%20（或在查询字符串中为+）
• 特殊字符：<, >, ", {, }, |, , ^, `, [, ]
• 非ASCII字符：任何超出128个ASCII字符的字符

编码示例

URL组成部分及其规则

URL的不同部分有不同的编码规则：

路径段

斜杠（/）是路径分隔符。在路径段内，对保留字符进行编码，但保留非保留字符（字母、数字、-、_、.、~）。

查询参数

?分隔符后的key=value对。键和值都应编码。历史上，空格在查询字符串中可以表示为+（application/x-www-form-urlencoded格式）。

片段标识符

#之后的部分。用于页面内导航。应进行编码，但+在此处不代表空格。

JavaScript URL编码函数

JavaScript提供了几个相关函数：

encodeURIComponent()

编码单个URI组件（查询值、路径段）。编码除以下字符外的所有字符：A-Z a-z 0-9 - _ . ! ~ * ' ( )

encodeURIComponent('Hello World!')  // 'Hello%20World!'
encodeURIComponent('user@example.com')  // 'user%40example.com'

encodeURI()

编码完整URI，保留结构字符。不编码：; , / ? : @ & = + $ # A-Z a-z 0-9 - _ . ! ~ * ' ( )

encodeURI('https://example.com/path?q=hello world')
// 'https://example.com/path?q=hello%20world'

URLSearchParams

用于查询字符串处理的现代API：

const params = new URLSearchParams({
  query: 'hello world',
  filter: 'a+b=c'
});
console.log(params.toString());
// 'query=hello+world&filter=a%2Bb%3Dc'

IDN（国际化域名）

非ASCII域名（如münchen.de）通过Punycode编码处理：

• münchen.de → xn--mnchen-3ya.de

这允许在域名中使用Unicode，同时保持与DNS基础设施的向后兼容性。

使用URL编码器工具

我们的工具：

1. 编码任意文本 — 转换为百分号编码的URL安全格式
2. 解码已编码的URL — 从编码形式恢复原始文本
3. 组件与完整URL模式 — 应用适当的编码规则
4. 查询参数构建器 — 从键值对构建正确编码的查询字符串
5. 复制结果 — 一键复制编码/解码输出

用于构建包含特殊字符的API URL、调试URL编码问题、编码用户输入作为URL参数，以及理解百分号编码的URL实际内容。