由 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 是小端序列存盤

一個??，大家可以計算一下，是否真正明白了位元組序

const buffer = new ArrayBuffer(8);
const int8Array = new Int8Array(buffer);
int8Array[0] = 30;
int8Array[1] = 41;

const dataView = new DataView(buffer);
dataView.setInt16(2, 256, true);
const int16Array = new Int16Array(buffer);
console.log(int16Array);  // [10526, 256, 0, 0]
int16Array[0] = 256;
const int8Array1 = new Int8Array(buffer);
console.log(int8Array1);

雖然 TypedArray 無法指定位元組序，但是在存盤的時候采用作業系統默認的位元組序，所以當我們設定 int16Array[0] = 256 時，記憶體中存盤的為 00 01

Base64 編碼解碼

什么是 Base64

Base64 是一種基于64個字符來表示二進制資料的方式，

A-Z、a-z、0-9、+、/、= 65個字符組成，值得注意的是 = 用于補位操作

const _base64Str = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789+/=';

Base64 原理

除去 = 這個補位符號，64個字符(即2^6)，可表示二進制 000000 至111111共6個位元位，一個位元組有8個位元位，因此可以推算出3個位元組的資料需要用4個 Base64 字符表示

舉個??，this 的 Base64 編碼為 dGhpcw== ，具體編碼如下

Base64 編碼解碼實作

在我們的專案中，實作 Base64 編碼通常使用 btoa 和 atob 實作編碼和解碼，下面來嘗試實作 btoa/atob

前置所需要了解函式

• 獲取相應字符 ASCII 碼方法 String.charCodeAt(index)
• 取得 Base64 對應的字符方法 String.charAt(index)

編碼實作思路

• 三個字符分別為 char1/char2/char3，對應的 base64 字符為 encode1/encode2/encode3/encode4
• encode1 是 char1 取前六位，即 char1 右移2位，encode1 = char1 >> 2
• encode2 是 char1 后兩位 + char2 前四位組成，encode2 = ((char1 & 3) << 4) | (char2 >> 4)
• encode3 是 char2 后四位 + char3 前兩位組成，encode3 = ((char2 & 15) << 2) | (char3 >> 6)
• encode4 是 char3 的后六位，encode4 = char3 & 63

function encodeBase64(input) {
    if (!input) return;
    let base64String = "";
    for (let i = 0; i < input.length; ) {
        const char1 = input.charCodeAt(i++);
        const encode1 = char1 >> 2;
        const char2 = input.charCodeAt(i++);
        const encode2 = ((char1 & 3) << 4) | (char2 >> 4);
        const char3 = input.charCodeAt(i++);
        let encode3 = ((char2 & 15) << 2) | (char3 >> 6);
        let encode4 = char3 & 63;
        if (Number.isNaN(char2)) encode3 = encode4 = 64;
        if (Number.isNaN(char3)) encode4 = 64;
        base64String +=
            _base64Str.charAt(encode1) +
            _base64Str.charAt(encode2) +
            _base64Str.charAt(encode3) +
            _base64Str.charAt(encode4);
    }
    return base64String;
}

解碼實作思路

• base64 字符為 encode1/encode2/encode3/encode4，三個字符分別為 char1/char2/char3
• char1 是 encode1 + encode2 前兩位，char1 = (encode1 << 2) | (encode2 >> 4)
• char2 是 encode2 后四位 + encode3 前四位，char2 = ((encode2 & 15) << 4) | (encode3 >> 2)
• char3 是 encode3 后兩位 + encode4，char3 = ((encode3 & 3) << 6) | encode4

function decodeBase64(input) {
    if (!input) return;
    let output = "";
    for (let i = 0; i < input.length; ) {
        const encode1 = _base64Str.indexOf(input.charAt(i++));
        const encode2 = _base64Str.indexOf(input.charAt(i++));
        const encode3 = _base64Str.indexOf(input.charAt(i++));
        const encode4 = _base64Str.indexOf(input.charAt(i++));
        const char1 = (encode1 << 2) | (encode2 >> 4);
        const char2 = ((encode2 & 15) << 4) | (encode3 >> 2);
        const char3 = ((encode3 & 3) << 6) | encode4;
        output += String.fromCharCode(char1);
        if (encode3 != 64) {
            output += String.fromCharCode(char2);
        }
        if (encode4 != 64) {
            output += String.fromCharCode(char3);
        }
    }
    return output;
}

一些問題

當我們使用上述代碼去編碼中文的時候，就能夠發現一些問題了，

console.log(encodeBase64("霜序"));                // 8=
console.log(decodeBase64(encodeBase64("霜序")));  // ?

其實是當字符的 Unicode 碼大于255時，上述魔法就會失靈，同樣的 window 上的 btoa 和 atob 方法也會失效，

霜序 兩個字的 Unicode 分別為 38684/24207，那我們可以把這些數字轉化為多個255內的數字，也就是用多個位元組表示，就可以使用我們上述 Unicode 轉 UTF-8 的方法，得到對應的字符，在對齊進行編碼

function encodeTransform(input) {
    if (!input) return;
    const byteArray = [];
    for (let i = 0; i < input.length; i++) {
        const code = input.charCodeAt(i); // 獲取到當前字符的 Unicode 碼
        if (code < 128) {
            byteArray.push(code);
        } else if (code >= 128 && code < 2048) {
            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;  // 回傳 UTF-8 編碼的資料
}

function encodeBase64(input) {
    if (!input) return;
    let base64String = "";
    const byteArray = encodeTransform(input);
    for (let i = 0; i < byteArray.length; ) {
        const char1 = byteArray[i++];
        const encode1 = char1 >> 2;
        const char2 = byteArray[i++];
        const encode2 = ((char1 & 3) << 4) | (char2 >> 4);
        const char3 = byteArray[i++];
        let encode3 = ((char2 & 15) << 2) | (char3 >> 6);
        let encode4 = char3 & 63;
        if (Number.isNaN(char2)) encode3 = encode4 = 64;
        if (Number.isNaN(char3)) encode4 = 64;
        base64String +=
            _base64Str.charAt(encode1) +
            _base64Str.charAt(encode2) +
            _base64Str.charAt(encode3) +
            _base64Str.charAt(encode4);
    }
    return base64String;
}

console.log(encodeBase64("霜序"));     // 6Zyc5bqP

同樣的我們也需要對解碼的內容做相應的轉換，我們需要把 Base64 解碼完成的資料，通過UTF-8的編碼規則還原回 Unicode 碼，找到對應的字符，

function decodeTransform(byteArray) {
    let i = 0;
    const output = [];
    while (i < byteArray.length) {
        const code = byteArray[i];
        if (code < 128) {
            output.push(code);
            i++;
        } else if (code > 191 && code < 224) {
            const code1 = byteArray[i + 1];
            output.push(((code & 31) << 6) | (code1 & 63));
            i += 2;
        } else {
            const code1 = byteArray[i + 1];
            const code2 = byteArray[i + 2];
            output.push(
                ((code & 15) << 12) | ((code1 & 63) << 6) | (code2 & 63)
            );
            i += 3;
        }
    }
    return output.map((item) => String.fromCharCode(item)).join("");
}

function decodeBase64(input) {
    if (!input) return;
    const byteArray = [];
    for (let i = 0; i < input.length; ) {
        const encode1 = _base64Str.indexOf(input.charAt(i++));
        const encode2 = _base64Str.indexOf(input.charAt(i++));
        const encode3 = _base64Str.indexOf(input.charAt(i++));
        const encode4 = _base64Str.indexOf(input.charAt(i++));
        const char1 = (encode1 << 2) | (encode2 >> 4);
        const char2 = ((encode2 & 15) << 4) | (encode3 >> 2);
        const char3 = ((encode3 & 3) << 6) | encode4;
        byteArray.push(char1);
        if (encode3 != 64) {
            byteArray.push(char2);
        }
        if (encode4 != 64) {
            byteArray.push(char3);
        }
    }
    return decodeTransform(byteArray);
}

總結

在本文中，重點是要實作 Base64 編碼的內容，然后先給大家講述了相關字符集(ASCII/Unicode)出現的原因，

Unicode 編碼相關的缺點，由此引出了 UTF-8/UTF-16 編碼，

對于 UTF-16 來說，最小的編碼單元為兩個位元組，由此引出了位元組序的內容，

當我們有了上述知識之后，最后開始 Base64 編碼的實作，

參考鏈接

• 字符編碼筆記：ASCII，Unicode 和 UTF-8
• 實作 Base64 的編碼解碼

標籤：Html/Css

上一篇：漲姿勢了，有意思的氣泡 Loading 效果

下一篇：【D02】Bootstrap免費精選模板推薦，附上Django中使用模板教程