作者： 黃鸝

詳解 base64 原理

案例：'鵝' --> 經(jīng)過base64編碼 --> 6bmF

那它怎么編碼的呢?

以 '鵝' 字為例

base64 對應(yīng)的編碼表：**字符串轉(zhuǎn)base64的轉(zhuǎn)碼規(guī)則：第一步，將每三個字節(jié)作為一組，一共是24個二進(jìn)制位。第二步，將這24個二進(jìn)制位分為四組，每個組有6個二進(jìn)制位。第三步，在每組前面加兩個00，擴(kuò)展成32個二進(jìn)制位，即四個字節(jié)。第四步，根據(jù)上表，得到擴(kuò)展后的每個字節(jié)的對應(yīng)符號，這就是Base64的編碼值。

異常情況處理(如果字節(jié)不足三的情況)

1. 二個字節(jié)的情況：將這二個字節(jié)的一共16個二進(jìn)制位，按照上面的規(guī)則，轉(zhuǎn)成三組，最后一組除了前面加兩個0以外，后面也要加兩個0。這樣得到一個三位的Base64編碼，再在末尾補(bǔ)上一個"="號。
2. 一個字節(jié)的情況：將這一個字節(jié)的8個二進(jìn)制位，按照上面的規(guī)則轉(zhuǎn)成二組，最后一組除了前面加二個0以外，后面再加4個0。這樣得到一個二位的Base64編碼，再在末尾補(bǔ)上兩個"="號。

使用 node 的 buffer 進(jìn)行處理：

demo1.js

 const CHARTS = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789+/';
 function encode(str) {
   let buf = Buffer.from(str);
   let result = '';
   let suffix = '';
   for (let b of buf) {
     result += b.toString(2).padStart(8, 0)
   }
   if ((result.length % 6) === 4) { // 一個字節(jié)的情況
     suffix = '=';
     result += '00';
   }
   if ((result.length % 6) === 2) { // 剩余兩個字節(jié)的情況
     suffix = '==';
     result += '0000';
   }
   return result.match(/(\d{6})/g).map(val => parseInt(val, 2)).map(val => CHARTS[val]).join('') + suffix
 }

function decode(str) {
      var result = '';
      for (let b of str) {
        if(b==='=') break;
        result += (CHARTS.indexOf(b)).toString(2).padStart(6, 0)
      }    
      var list =  result.match(/(\d{8})/g).map((number)=>{
        return parseInt(number, 2)
      })
      return Buffer.from(list).toString('utf8')
 }
 var ss = encode('朱昆m');
 console.log(ss) // 5pyx5piGbQ==
 console.log(decode(ss)) // 朱昆m

上述代碼闡述的編解碼的過程。但是如果去看第三方庫的代碼，會發(fā)現(xiàn)還是看不懂的~

為什么會看不懂了？

原因：

1. 為了兼容瀏覽器的Unicode編碼，需要先對Unicode進(jìn)行編解碼。
2. 引入二進(jìn)制操作，提高位操作效率；

舉例：

鵝 -> Unicode字符集(40517 十進(jìn)制) -> 0b1001 1110 0100 0101(二進(jìn)制) 鵝 -> utf8編碼(15317381 十進(jìn)制) -> 0b1110 1001 1011 1001 1000 0101（二進(jìn)制）

Unicode轉(zhuǎn)utf8:

1. 將高位字節(jié)的高四位，與1110 形成一個新字節(jié)。
2. 將高位字節(jié)的低四位，與低位字節(jié)的高兩位，與10形成一個新字節(jié)
3. 將地位字節(jié)的低六位與10 形成一個新字節(jié)。
4. 三個新字節(jié)按順序排布，形成一個新的編碼，就是utf編碼。

utf8轉(zhuǎn)Unicode:將上述的順序翻轉(zhuǎn)。就可以返回新的Unicode編碼。

let _keyStr = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789+/=";
console.log(decode(encode('鵝')))
function encode(input) {
  var output = "";
  var chr1, chr2, chr3, enc1, enc2, enc3, enc4;
  var i = 0;
  // 將Unicode，變成 utf8
  input = _utf8_encode(input); 
  // 將utf8 轉(zhuǎn)成 base64
  while (i < input.length) {
    chr1 = input.charCodeAt(i++);
    chr2 = input.charCodeAt(i++);
    chr3 = input.charCodeAt(i++);
    enc1 = chr1 >> 2;
    enc2 = ((chr1 & 3) << 4) | (chr2 >> 4);
    enc3 = ((chr2 & 15) << 2) | (chr3 >> 6);
    enc4 = chr3 & 63;
    if (isNaN(chr2)) {
      enc3 = enc4 = 64;
    } else if (isNaN(chr3)) {
      enc4 = 64;
    }
    output = output +
      _keyStr.charAt(enc1) + _keyStr.charAt(enc2) +
      _keyStr.charAt(enc3) + _keyStr.charAt(enc4);
  }
  return output;
}
function decode(input) {
  var output = "";
  var chr1, chr2, chr3;
  var enc1, enc2, enc3, enc4;
  var i = 0;
  input = input.replace(/[^A-Za-z0-9\+\/\=]/g, "");
  //將base64轉(zhuǎn)化成utf8
  while (i < input.length) {
    enc1 = _keyStr.indexOf(input.charAt(i++));
    enc2 = _keyStr.indexOf(input.charAt(i++));
    enc3 = _keyStr.indexOf(input.charAt(i++));
    enc4 = _keyStr.indexOf(input.charAt(i++));
    chr1 = (enc1 << 2) | (enc2 >> 4);
    chr2 = ((enc2 & 15) << 4) | (enc3 >> 2);
    chr3 = ((enc3 & 3) << 6) | enc4;
    output = output + String.fromCharCode(chr1);
    if (enc3 != 64) {
      output = output + String.fromCharCode(chr2);
    }
    if (enc4 != 64) {
      output = output + String.fromCharCode(chr3);
    }
  }
  // 將utf8轉(zhuǎn)成瀏覽器認(rèn)識的Unicode
  output = _utf8_decode(output);
  return output;

}
function _utf8_encode(string) { // 將Unicode，變成 utf8
  string = string.replace(/\r\n/g, "\n");
  var utftext = "";
  for (var n = 0; n < string.length; n++) {
    var c = string.charCodeAt(n);
    if (c < 128) {
      utftext += String.fromCharCode(c);
    } else if ((c > 127) && (c < 2048)) {
      utftext += String.fromCharCode((c >> 6) | 192);
      utftext += String.fromCharCode((c & 63) | 128);
    } else {
      utftext += String.fromCharCode((c >> 12) | 0b11100000);
      utftext += String.fromCharCode(((c >> 6) & 0b111111) | 0b10000000);
      utftext += String.fromCharCode((c & 0b111111) | 0b10000000);
    }

  }
  return utftext;
}

function _utf8_decode(utftext) { // 將utf8轉(zhuǎn)成Unicode
  var string = "";
  var i = 0;
  var c = c1 = c2 = 0;
  while (i < utftext.length) {
    c = utftext.charCodeAt(i); // 第一個字節(jié)
    if (c < 128) {
      string += String.fromCharCode(c);
      i++;
    } else if ((c > 191) && (c < 224)) {
      c2 = utftext.charCodeAt(i + 1);
      string += String.fromCharCode(((c & 31) << 6) | (c2 & 63));
      i += 2;
    } else {
      c2 = utftext.charCodeAt(i + 1); // 第一個字節(jié)
      c3 = utftext.charCodeAt(i + 2); // 第二個字節(jié)
      string += String.fromCharCode(((c & 0b1111) << 12) | ((c2 & 0b111111) << 6) | (c3 & 0b111111));
      i += 3;
    }
  }
  return string;
}

重點：上述代碼中，明白二進(jìn)制的移位操作，和Unicode碼的轉(zhuǎn)碼規(guī)則。理解起來難度就不大了。

解釋：

1. Unicode字符集 相當(dāng)于 字和詞的匯總，相當(dāng)于語言的概念；
2. utf8編碼 是一種編碼格式， 相當(dāng)于漢語，英語的概念。
3. 鵝 在漢語中叫 '鵝'，在 英語中叫 'goose' 漢語，英語放在計算機(jī)里面就相當(dāng)于一種編碼，類似utf8,gbk。

參考文檔：

Base64原理程序員必備：

徹底弄懂常見的7種中文字符編碼

Unicode 和 UTF-8 有什么區(qū)別base64筆記