由 Base64 展開的知識探討

我們是袋鼠雲數棧 UED 團隊，致力於打造優秀的一站式數據中台產品。我們始終保持工匠精神，探索前端道路，為社區積累並傳播經驗價值。。

本文作者：霜序(掘金)

前言

在我們的業務應用中越來越多的應用到編碼內容，例如在 API 中，給到後端的 SQL 都是通過 Base64 加密的數據等等。

能夠發現我們的代碼中，使用的 window 對象上的 btoa 方法實現的 Base64 編碼，那 btoa 具體是如何實現的呢？將在下麵的內容中為大家講解。

那我們就先從一些基礎知識開始深入瞭解吧~

什麼是編碼

編碼，是信息從一種形式轉變為另一種形式的過程，簡要來說就是語言的翻譯。

將機器語言(二進位)轉變為自然語言。

五花八門的編碼

ASCII 碼

ASCII 碼是一種字元編碼標準，用於將數字、字母和其他字元轉換為電腦可以理解的二進位數。

它最初是由美國信息交換標準所制定的，它包含了 128 個字元，其中包括了數字、大小寫字母、標點符號、控制字元等等。

在電腦中一個位元組可以表示256眾不同的狀態，就對應256字元，從 00000000 到 11111111。ASCII 碼一共規定了128字元，所以只需要占用一個位元組的後面7位，最前面一位均為0，所以 ASCII 碼對應的二進位位 00000000 到 01111111。

非 ASCII 碼

當其他國家需要使用電腦顯示的時候就無法使用 ASCII 碼如此少量的映射方法。因此技術革新開始啦。

• GB2312
  收錄了6700+的漢字，使用兩個位元組作為編碼字元集的空間
• GBK
  GBK 在保證不和 GB2312/ASCII 衝突的情況下，使用兩個位元組的方式編碼了更多的漢字，達到了2w
• 等等

全面統一的 Unicode

面對五花八門的編碼方式，同一個二進位數會被解釋為不同的符號，如果使用錯誤的編碼的方式去讀區文件，就會出現亂碼的問題。

那能否創建一種編碼能夠將所有的符號納入其中，每一個符號都有唯一對應的編碼，那麼亂碼問題就會消失。因此 Unicode 藉此機會統一江湖。是由一個叫做 Unicode 聯盟的官方組織在維護。

Unicode 最常用的就是使用兩個位元組來表示一個字元(如果是更為偏僻的字元，可能所需位元組更多)。現代操作系統都直接支持 Unicode。

Unicode 和 ASCII 的區別

• ASCII 編碼通常是一個位元組，Unicode 編碼通常是兩個位元組.
  字母 A 用 ASCII 編碼十進位為 65，二進位位 01000001；而在 Unicode 編碼中，需要在前面全部補0，即為 00000000 01000001
• 問題產生了，雖然使用 Unicode 解決亂碼的問題，但是為純英文的情況，存儲空間會大一倍，傳輸和存儲都不划算。

問題對應的解決方案之UTF-8

UTF-8 全名為 8-bit Unicode Transformation Format

本著節約的精神，又出現了把 Unicode 編碼轉為可變長編碼的 UTF-8。可以根據不同字元而變化位元組長度，使用1~4位元組表示一個符號。UTF-8 是 Unicode 的實現方式之一。

UTF-8 的編碼規則

1. 對於單位元組的符號，位元組的第一位設置為0，後面七位為該字元的 Unicode 碼。因此對於英文字母，UTF-8 編碼和 ASCII 編碼是相同的。
2. 對於 n 位元組的符號，第一個位元組的前 n 位都是1，第 n+1 位為0，後面的位元組的前兩位均為10。剩下的位所填充的二進位就是這個字元的 Unicode 碼

對應的編碼表格

在 Unicode 對應表中查找到“杪”所在的位置，以及其對應的十六進位 676A，對應的十進位為 26474(110011101101010)，對應三個位元組 1110xxxx 10xxxxxx 10xxxxxx

將110011101101010的最後一個二進位依次填充到1110xxxx 10xxxxxx 10xxxxxx從後往前的 x ，多出的位補0即可，中，得到11100110 10011101 10101010 ，轉換得到39a76a，即是杪字對應的 UTF-8 的編碼

• >> 向右移動，前面補 0, 如 104 >> 2 即 01101000=> 00011010
• & 與運算，只有兩個操作數相應的比特位都是 1 時，結果才為 1，否則為 0。如 104 & 3即 01101000 & 00000011 => 00000000，& 運算也用在取位時
• | 或運算，對於每一個比特位，當兩個操作數相應的比特位至少有一個 1 時，結果為 1，否則為 0。如 01101000 | 00000011 => 01101011

function unicodeToByte(input) {
    if (!input) return;
    const byteArray = [];
    for (let i = 0; i < input.length; i++) {
        const code = input.charCodeAt(i); // 獲取到當前字元的 Unicode 碼
        if (code < 127) {
            byteArray.push(code);
        } else if (code >= 128 && code < 2047) {
            byteArray.push((code >> 6) | 192);
            byteArray.push((code & 63) | 128);
        } else if (code >= 2048 && code < 65535) {
            byteArray.push((code >> 12) | 224);
            byteArray.push(((code >> 6) & 63) | 128);
            byteArray.push((code & 63) | 128);
        }
    }
    return byteArray.map((item) => parseInt(item.toString(2)));
}

問題對應的解決方案之UTF-16

UTF-16 全名為 16-bit Unicode Transformation Format
在 Unicode 編碼中，最常用的字元是0-65535，UTF-16 將0–65535範圍內的字元編碼成2個位元組，超過這個的用4個位元組編碼

UTF-16 編碼規則

1. 對於 Unicode 碼小於 0x10000 的字元， 使用2個位元組存儲，並且是直接存儲 Unicode 碼，不用進行編碼轉換
2. 對於 Unicode 碼在 0x10000 和 0x10FFFF 之間的字元，使用 4 個位元組存儲，這 4 個位元組分成前後兩部分，每個部分各兩個位元組，其中，前面兩個位元組的前 6 位二進位固定為 110110，後面兩個位元組的前 6 位二進位固定為 110111，前後部分各剩餘 10 位二進位表示符號的 Unicode 碼 減去 0x10000 的結果
3. 大於 0x10FFFF 的 Unicode 碼無法用 UTF-16 編碼

對應的編碼表格

“杪”字的 Unicode 碼為 676A(26474)，小於 65535，所以對應的 UTF-16 編碼也為 676A
找一個大於 0x10000 的字元，0x1101F，進行 UTF-16 編碼

位元組序

對於上述講到的 UTF-16 來說，它存在一個位元組序的概念。

位元組序就是位元組之間的順序，當傳輸或者存儲時，如果超過一個位元組，需要指定位元組間的順序。

最小編碼單元是多位元組才會有位元組序的問題存在，UTF-8 最小編碼單元是一個位元組，所以它是沒有位元組序的問題，UTF-16 最小編碼單元是兩個位元組，在解析一個 UTF-16 字元之前，需要知道每個編碼單元的位元組序。

為什麼會出現位元組序？
電腦電路先處理低位位元組，效率比較高，因為計算都是從低位開始的。所以，電腦的內部處理都是小端位元組序。但是，人類還是習慣讀寫大端位元組序。
所以，除了電腦的內部處理，其他的場合比如網路傳輸和文件儲存，幾乎都是用的大端位元組序。
正是因為這些原因才有了位元組序。

比如：前面提到過，"杪"字的 Unicode 碼是 676A，"橧"字的 Unicode 碼是 6A67，當我們收到一個 UTF-16 位元組流 676A 時，電腦如何識別它表示的是字元 "杪"還是 字元 "橧"呢 ?

對於多位元組的編碼單元需要有一個標識顯式的告訴電腦，按著什麼樣的順序解析字元，也就是位元組序。

• 大端位元組序(Big-Endian)，表示高位位元組在前面，低位位元組在後面。高位位元組保存在記憶體的低地址端，低位位元組保存在在記憶體的高地址端。
• 小端位元組序(Little-Endian)，表示低位位元組在前，高位位元組在後面。高位位元組保存在記憶體的高地址端，而低位位元組保存在記憶體的低地址端。
  

簡單聊聊 ArrayBuffer 和 TypedArray、DataView

ArrayBuffer

ArrayBuffer 是一段存儲二進位的記憶體，是位元組數組。

它不能夠被直接讀寫，需要創建視圖來對它進行操作，指定具體格式操作二進位數據。

可以通過它創建連續的記憶體區域，參數是記憶體大小(byte)，預設初始值都是 0

TypedArray

ArrayBuffer 的一種操作視圖，數據都存儲到底層的 ArrayBuffer 中

const buf = new ArrayBuffer(8);
const int8Array = new Int8Array(buf);
int8Array[3] = 44;
const int16Array = new Int16Array(buf);
int16Array[0] = 42;
console.log(int16Array); // [42, 11264, 0, 0]
console.log(int8Array);  // [42, 0, 0, 44, 0, 0, 0, 0]

使用 int8 和 int16 兩種方式新建的視圖是相互影響的，都是直接修改的底層 buffer 的數據

DataView

DataView 是另一種操作視圖，並且支持設置位元組序

const buf = new ArrayBuffer(24);
const dataview = new DataView(buf);
dataView.setInt16(1, 3000, true);  // 小端序

明確電腦的位元組序

上述講到，在存儲多位元組的時候，我們會採用不同的位元組序來做存儲。那對我們的操作系統來說是有一種預設的位元組序的。下麵就用上述知識來明確 MacOS 的預設位元組序。

function isLittleEndian() {
    const buf = new ArrayBuffer(2);
    const view = new Int8Array(buf);
    view[0]=1;
    view[1]=0;
    console.log(view);
    const int16Array = new Int16Array(buf);
    return int16Array[0] === 1;
}
console.log(isLittleEndian());

通過上述代碼我們可以得出此款 MacOS 是小端序列存儲

一個