JavaScript中的URL编码：如何处理和转义非ASCII字符

1. 字符的码点

首先，字符 "中" 是一个汉字，其Unicode码点为 U+4E2D。在十六进制中，U+4E2D 对应的数字是 0x4E2D。Unicode是字符集的标准，每个字符都对应一个唯一的码点。

2. 编码的规则

UTF-8是一种可变长度的字符编码方案，采用1到4个字节来表示字符。对于字符 "中"，其Unicode码点 U+4E2D 落在 0x0800 到 0xFFFF 的范围内，因此它将使用3个字节来进行编码。

UTF-8编码规则简述：

• 1字节编码 ：适用于Unicode范围从 0x0000 到 0x007F（即ASCII字符），用一个字节表示，格式为：0xxxxxxx
• 2字节编码 ：适用于Unicode范围从 0x0080 到 0x07FF，用两个字节表示，格式为：110xxxxx 10xxxxxx
• 3字节编码 ：适用于Unicode范围从 0x0800 到 0xFFFF，用三个字节表示，格式为：1110xxxx 10xxxxxx 10xxxxxx
• 4字节编码 ：适用于Unicode范围从 0x10000 到 0x10FFFF，用四个字节表示，格式为：11110xxx 10xxxxxx 10xxxxxx 10xxxxxx

3. 字符 "中" 的UTF-8编码过程

对于字符 "中"，其Unicode码点为 U+4E2D，因此我们需要按照UTF-8的3字节编码规则进行编码。

1. 获取Unicode码点 ：

   • "中" 的Unicode码点是 U+4E2D，十六进制值为 0x4E2D。

2. 转换为二进制 ：

   • 将 0x4E2D 转换为二进制： 0x4E2D = 0100 1110 0010 1101（16位二进制表示）

3. 按照UTF-8编码格式进行编码 ：

   • 根据UTF-8的规则，U+4E2D 需要用三个字节来表示。
   • UTF-8的3字节格式是： 1110xxxx 10xxxxxx 10xxxxxx
   • 将二进制数 0100111000101101 填入到上述格式中：
     • 第一个字节 （1110xxxx）：将 0100111 放入 xxxx 部分，得到 11100100。
     • 第二个字节 （10xxxxxx）：将 001011 放入 xxxxxx 部分，得到 10111000。
     • 第三个字节 （10xxxxxx）：将 101101 放入 xxxxxx 部分，得到 10101101。

   这样，U+4E2D 的UTF-8编码就为：1110 0100 1011 1000 1010 1101

4. 转换为十六进制 ：

   • 将每个字节转换为十六进制表示：
     • 11100100 → E4
     • 10111000 → B8
     • 10101101 → AD

   所以，字符 "中" 的UTF-8编码是：E4 B8 AD。

4. 转换为URL百分号编码

在URL编码中，所有非ASCII字符（包括UTF-8编码的字符）都需要转换成百分号编码格式，即将每个字节转换为 % 后跟上该字节的十六进制值。因此，UTF-8编码的 E4 B8 AD 将被转换为URL编码格式：

• E4 → %E4
• B8 → %B8
• AD → %AD

最终，字符 "中" 的URL编码就是：%E4%B8%AD

5. 总结过程

总结一下字符 "中" 从Unicode到UTF-8编码，再到URL百分号编码的完整过程：

1. 获取字符的Unicode码点：U+4E2D。
2. 将Unicode码点 U+4E2D 转换为二进制：0100111000101101。
3. 根据UTF-8编码规则，将二进制值转换为3字节：E4 B8 AD。
4. 将每个字节转换为URL百分号编码：%E4%B8%AD。

6. JS代码示例

JavaScript提供了两个主要函数来进行URL编码：

• encodeURIComponent()：编码单个URL组件（如查询参数、路径段等）。
• encodeURI()：编码整个URL，但不会编码已是URL合法的字符，如冒号（:）、斜杠（/）等。

const str = '中';
const encodedStr = encodeURIComponent(str);
console.log(encodedStr); // 输出: %E4%B8%AD

结论

通过以上详细过程，我们可以看出UTF-8编码采用变长字节表示方式，字符 "中" 使用了3个字节进行编码。而URL编码则将这些字节转换为百分号表示，从而保证了字符可以在网络中正确传输并被解析。希望这个过程帮助您更好地理解UTF-8编码和URL编码的实现原理。