前端培训中级阶段16-Unicode和UTF编码20190912期

前端最基础的就是 HTML+CSS+Javascript。掌握了这三门技术就算入门，但也仅仅是入门，现在前端开发的定义已经远远不止这些。前端小课堂（HTML/CSS/JS），本着提升技术水平，打牢基础知识的中心思想，我们开课啦（每周四）。

编码解码对于 web 开发来说，有可能最常见的是URL 编码(encode decode)。

ASCII 编码

计算机处理的内容是二进制 ，对应开和关的状态。如果要处理文本，也是把文本转换为数字然后做比对。最早的计算机在设计时采用 8 个比特（bit）作为一个字节（byte）。
一个字节能表示的最大的整数就是 255（0b11111111==255）。这 255 个数字被用来表示大小写英文字母、数字和一些符号，这个 编码表被称为 ASCII 编码，比如大写字母 A 的编码是 65，小写字母 a 的编码是 97。

ASCII 对照表

GB2312 编码

如果要表示中文，显然 ASCII 的一个字节是不够的，至少需要两个字节，而且还不能和 ASCII 编码冲突。
所以，中国制定了 GB2312 编码（国标 2312 编码），用来把中文编进去。

Unicode 编码

Unicode（万国码），包括字符集、编码方案等。
Unicode 是为了解决传统的字符编码方案的局限而产生的，它 为每种语言中的每个字符设定了统一并且唯一的二进制编码 ，以满足 跨语言 、 跨平台 进行文本转换、处理的要求。1990 年开始研发，1994 年正式公布。
Unicode通常用 两个字节表示一个字符 ， 原有的英文编码从单字节变成双字节 ，只需要把 高字节全部填为 0 就可以。目前的 Unicode 字符集为 0x0000 至0x10FFFF，分为17 组编排，，每平面拥有65536 个码位，共1114112 个码位。

Unicode 到目前为止所定义的十七个平面中，第 0 平面 (BMP) 最为重要。

中文范围 4E00-9FA5：CJK 统一表意符号 (CJK Unified Ideographs)

在 Unicode 中：“李”字对应的数字是26446（十进制），十六进制表示为0x674e。

UTF 编码系列

Unicode 只是一个大的合集，UTF-8、UTF-16、UTF-32才是将数字转换到程序数据的编码方案。
UTF是 Unicode Transformation Format 的缩写，可以翻译成Unicode 字符集转换格式，即怎样将 Unicode 定义的数字转换成程序数据。

UTF-8

UTF- 8 的 特点是对不同范围的字符使用不同长度的编码，这点极大的缩小了文件的大小。当然，也会造成一定的性能浪费，

对于 0x00-0x7F 之间的字符，UTF- 8 编码与 ASCII 编码完全相同。
对于超过区间的字符，最高位非 0，10标识当前属于前面字节的描述字节。110标明这是两个字节的，后面还会跟着一个字节。

UTF- 8 编码的最大长度是 4 个字节。从表格中可以看到，4 字节模板有 21 个 x，即可以容纳 21 位二进制数字。Unicode 的最大码位 0x10FFFF 也只有 21 位。

UTF-16

UTF-16 编码以 16 位无符号整数为单位 。我们把 Unicode 编码记作 U。
如果 U<0x10000，UTF-16 编码（二进制）就是对应的 16 位无符号整数。
如果U≥0x10000，先计算U'=U-0x10000，然后将 U ’ 写成二进制形式：yyyy yyyy yyxx xxxx xxxx，U 的 UTF-16 编码（二进制）就是：110110yyyyyyyyyy 110111xxxxxxxxxx。

这里，你会好奇，因为第二条规则会和第一条规则重复。为了将编码区分开来，Unicode编码的设计者将 0xD800-0xDFFF 保留下来，并称为 代理区（Surrogate）

// D800-DB7F    High Surrogates    高位替代
// 指 UTF-16 编码中。两个位置中的第一个位置
(0xD800).toString(2) == 1101100000000000
(0xDB7F).toString(2) == 1101101101111111

// DC00-DFFF    Low Surrogates     低位替代
// 指 UTF-16 编码中。两个位置中的第二个位置
(0xDC00).toString(2) == "1101110000000000"
(0xDFFF).toString(2) == "1101111111111111"

// DB80-DBFF    High Private Use Surrogates      高位专用替代
(0xDB80).toString(2) == "1101101110000000"
(0xDBFF).toString(2) == "1101101111111111"

UTF-32

UTF-32 编码以 32 位无符号整数为单位。Unicode 的 UTF-32 编码就是其对应的 32 位无符号整数。

字节序

字节序有两种，分别是“大端”（Big Endian, BE）和“小端”（Little Endian, LE）。
根据字节序的不同，UTF-16 可被实现为 UTF-16LE 或 UTF-16BE，UTF-32 可被实现为 UTF-32LE 或 UTF-32BE。

Unicode标准建议用 BOM（Byte Order Mark） 来区分字节序，即在传输字节流前，先传输被作为 BOM 的字符“零宽无中断空格”。这个字符的编码是 FEFF，而反过来的 FFFE（UTF-16）和 FFFE0000（UTF-32）在 Unicode 中都是未定义的码位，不应该出现在实际传输中。

URL 编码 / 解码

url 编码是一种 浏览器用来打包表单输入的格式 。
浏览器将表单中获取到的内容，以 name=value 参数编码，作为 URL 的一部分或者放入 body 发给服务器。转换成如:a=1&b=2。

基于上面的规则，=或者 & 都会造成解析异常。所以特殊的字符（不是简单的七位 ASCII，如汉字，关键词），会以 %XX 这个格式转义，比如：

// 转换代码
encodeURIComponent('李').replace(/%([0-9a-f]{2})/gi, (v,group1)=>parseInt(group1,16).toString(2)+'') //"11100110 10011101 10001110 "encodeURIComponent('=').replace(/%([0-9a-f]{2})/gi, (v,group1)=>parseInt(group1,16).toString(2).padStart(8,'0')+' ') //"00111101 "

微信公众号：前端 linong

参考文献

1. 前端培训目录、前端培训规划、前端培训计划