【深入 Base64】Javascript 的字符集及编码(二)

上一节了解了 Base64 的编码原理和过程,这一节了解一下 Javascript 的字符集和字符编码,为后面的编解码处理做好准备。

 ASCII码

ASCII 码是美国针对英语字符制定的一套字符编码(或者叫字符集)。ASCII 是单字节编码,用 8 位二进制表示一个英文字符,其最高位总为 0,字符范围为 00000000 ~ 0fffffff(128个)。比如空格 "SPACE" 是32(二进制00100000),大写的字母 A 是 65(二进制01000001)。

非 ASCII 码

因为 ASCII 码表示的字符数量太少了,所以各个国家会针对 ASCII 码进行重新编码,利用其闲置的最高位来进行扩展,最多能表示 256 个字符;但到了东南亚国家,256 个字符仍然不够用,这时会用两个字节表示一个字符,比如 GB2312,其能表示的字符达到了 256 * 256 的数量。

UNICODE码

因为上面出现的不同编码,会导致一个非 ASCII 码,如果不知道编码规则的情况下,在不同的地区会表示成不同的字符,比如我们经常出现打开文件乱码。为了解决这个问题,我们需要制定统一标准,让全世界所有的字符都有唯一的编码,这就是Unicode,它是一种所有符号的编码。

但是,unicode 只是一种字符集,并没有说明编码格式,也就是说一个字符所对应的 unicode 十六进制值,我可以以任何形式进行存储,这也是造成 unicode 码一开始没有大规模流行的原因。

UTF-8

互联网的普及,强烈需要一种统一的编码方式。UTF-8 就是现在使用最广的一种 Unicode 的编码实现。其他编码还包括 UTF-16(字符用两个字节或四个字节表示)和 UTF-32(字符用四个字节表示),不过在互联网上基本不用。

UTF-8 是一种变长的编码方式。它可以使用 1~4 个字节表示一个符号,根据不同的符号而变化字节长度。

UTF-8 的编码规则很简单,只有二条:

  1. 对于单字节的符号,字节的第一位设为 0,后面 7 位为这个符号的 unicode 码。因此对于英语字母,UTF-8 编码和 ASCII 码是相同的。
  2. 对于 n 字节的符号(n>1),第一个字节的前 n 位都设为 1,第 n+1 位设为 0,后面字节的前两位一律设为 10。剩下的没有提及的二进制位,全部为这个符号的 unicode 码。

Unicode 字符范围(十六进制)

Utf-8 编码(二进制)

0000 0000 ~ 0000 007F 0xxxxxxx
0000 0080 ~ 0000 07FF 110xxxxx 10xxxxxx
0000 0800 ~ 0000 FFFF 1110xxxx 10xxxxxx 10xxxxxx
0001 0000 ~ 0010 FFFF 11110xxx 10xxxxxx 10xxxxxx 10xxxxxx

UTF-8 编码非常简单。如果一个字节的第一位是 0,则这个字节单独就是一个字符;如果第一位是 1,则连续有多少个 1,就表示当前字符占用多少个字节。

比如“风”,其 unicode 码为 98CE,对应的二进制码为 1001 1000 1100 1110,按照上面规则转换后的二进制码为 11101001 10100011 10001110,对应的十六进制码为 E9A38E,其正对应着“风”的 utf-8 码。

UCS-2

JavaScript 语言采用 Unicode 字符集,但是只支持一种编码方法。这种编码既不是 UTF-16,也不是 UTF-8,更不是 UTF-32,而是 UCS-2。

什么是 UCS-2?这就需要讲一点历史。

在很久以前,曾经有两个团队同时想搞统一字符集,一个是 1988 年成立的 Unicode 团队,另一个是 1989 年成立的 UCS 团队。等到他们发现了对方的存在时,他们达成一致:世界上不需要两套统一字符集。于是在 1991 年 10 月,两个团队决定合并字符集,从今以后只发布一套字符集,就是 Unicode,并且修订此前发布的字符集,UCS 的码点将与 Unicode 完全一致。

但是 UCS 的开发进度快于 Unicode,1990 年就公布了第一套编码方法 UCS-2,而 Unicode 在 1996 年 7 月才公布第一套编码 UTF-16。而 Javascript 是 1995 年才出现的,所以,不是它不想采用别的编码方案,而是只有 UCS-2 这一套编码方案。

Javascript 实现 Unicode 转 UTF-8

因为 Javascript 的字符集是 unicode,而且 Javascript 中提供了读取字符 unicode 值的方法 charCodeAt,所以我们可以一个一个字符地读取 unicode 值,然后按照上面的规则进行转换。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Javascipt 实现 Utf-8 编解码</title>
</head>
<body>
<div>
    <span>输入要编码的字符串</span>
    <input type="text" id="input">
</div>
<div>
    <span>utf-8 编码:</span>
    <span id="utf-8"></span>
</div>
<div>
    <span>utf-8 解码:</span>
    <span id="unicode"></span>
</div>
<script>
    function unicode2utf8(str) {
        var charCode,
            outStr = "",
            len = str.length;
        for (var i = 0; i < len; i++) {
            charCode = str.charCodeAt(i);

            if (charCode <= 0x7f) { // 兼容 ASCII 的单字节 UTF-8
                outStr += str.charAt(i);
            } else if (charCode >= 0x800) { // 三字节 UTF-8
                outStr += String.fromCharCode(0xE0 | ((charCode >> 12) & 0xF));
                outStr += String.fromCharCode(0x80 | ((charCode >> 6) & 0x3F));
                outStr += String.fromCharCode(0x80 | ((charCode >> 0) & 0x3F));
            } else { // 双字节 UTF-8
                outStr += String.fromCharCode(0xC0 | ((charCode >> 6) & 0x1F));
                outStr += String.fromCharCode(0x80 | ((charCode >> 0) & 0x3F));
            }
        }
        return outStr;
    }

    function utf82unicode(str) {
        var len = str.length,
            outStr = "",
            charCode,
            h1, h2, h3;

        for (var i = 0; i < len; i++) {
            charCode = str.charCodeAt(i);

            // 双字节及以上 utf-8 编码
            if (charCode > 0xC0) {
                if (charCode < 0xE0) { // 双字节编码
                    h1 = (charCode & 0x1F) << 6;
                    h2 = str.charCodeAt(++i) & 0x3F;

                    outStr += String.fromCharCode(h1 | h2);
                } else { // 三字节编码
                    h1 = (charCode & 0xF) << 12;
                    h2 = (str.charCodeAt(++i) & 0x3F) << 6;
                    h3 = str.charCodeAt(++i) & 0x3F;

                    outStr += String.fromCharCode(h1 | h2 | h3);
                }
            } else {
                outStr += str.charAt(i);
            }
        }
        return outStr;
    }

    document.querySelector("#input").addEventListener("input", function () {
        var utf8 = unicode2utf8(this.value);
        document.querySelector("#utf-8").innerText = utf8;
        document.querySelector("#unicode").innerText = utf82unicode(utf8);
    })
</script>
</body>
</html>