成人免费xxxxx在线视频软件_久久精品久久久_亚洲国产精品久久久_天天色天天色_亚洲人成一区_欧美一级欧美三级在线观看

徹底弄懂Base64的編碼與解碼原理

作者：大轉轉FE
開發 前端
base64的編碼原理網上講解較多，但解碼原理講解較少，并且沒有對其中的內部實現原理進行剖析。想要徹底了解base64的編碼與解碼原理，請耐心看完此文，你一定會有所收獲。

[[422254]]

本文轉載自微信公眾號「大轉轉FE」，作者大轉轉FE。轉載本文請聯系大轉轉FE公眾號。

背景

base64的編碼原理網上講解較多，但解碼原理講解較少，并且沒有對其中的內部實現原理進行剖析。想要徹底了解base64的編碼與解碼原理，請耐心看完此文，你一定會有所收獲。

涉及算法與邏輯運算概念

在探究base64編碼原理和解碼原理的過程中，我們首先需要了解下面會用到的算法和邏輯運算的概念，這樣才能真正的吃透base64的編碼原理和解碼原理，體會到其中算法的精妙，甚至是在思考的過程中得到意想不到的收獲。不清楚base64編碼表和ascII編碼表的同學可直接前往文末查看。

短除法

短除法運算方法是先用一個除數除以能被它除盡的一個質數，以此類推，除到商是質數為止。

通過短除法，十進制數可以不斷除以2得到多個余數。最后，將余數從下到上進行排列組合，得到二進制數，我們以字符n對應的ascII編碼110為例。

  1. 110 / 2  = 55...0 
  2. 55  / 2  = 27...1 
  3. 27  / 2  = 13...1 
  4. 13  / 2  = 6...1 
  5. 6   / 2  = 3...0 
  6. 3   / 2  = 1...1 
  7. 1   / 2  = 0...1 

將余數從下到上進行排列組合，得到字符n對應的ascII編碼110轉二進制為1101110，因為一字節對應8位(bit), 所以需要向前補0補足8位，得到01101110。其余字符同理可得。

按權展開求和

按權展開求和, 8位二進制數從右到左，次數是0到7依次遞增, 基數*底數次數，從左到右依次累加，相加結果為對應十進制數。我們以二進制數01101110轉10進制為例：

(01101110)2 = 0 * 20 + 1 * 21 + 1 * 22 + 1 * 23 + 0 * 24 + 1 * 25 + 1 * 26 + 0 * 27

位概念

二進制數系統中，每個0或1就是一個位(bit，比特)，也叫存儲單元，位是數據存儲的最小單位。其中8bit就稱為一個字節(Byte)。

移位運算符

移位運算符在程序設計中，是位操作運算符的一種。移位運算符可以在二進制的基礎上對數字進行平移。按照平移的方向和填充數字的規則分為三種：<<(左移)、>>(帶符號右移)和>>>(無符號右移)。我們在base64的編碼和解碼過程中操作的又是正數，所以僅使用<<(左移)、>>(帶符號右移)兩種運算符。

  • 左移運算：是將一個二進制位的操作數按指定移動的位數向左移動，移出位被丟棄，右邊移出的空位一律補0。
  • 右移運算：是將一個二進制位的操作數按指定移動的位數向右移動，移出位被丟棄，左邊移出的空位一律補0，或者補符號位，這由不同的機器而定。在使用補碼作為機器數的機器中，正數的符號位為0，負數的符號位為1。

我們用大白話來描述左移位，一共有8個座位，坐了8個人，在8個座位不動的情況下，現在我讓這8個人往左挪2個座位，于是最左邊的兩個人站了起來，沒有座位坐，而最右邊空出來了兩個座位。移位操作就相當于站起來的人出局，留出來的空位補0.

  1. // 左移 
  2.  01101000 << 2 -> 101000(左側移出位被丟棄) -> 10100000(右側空位一律補0) 
  3.  // 右移 
  4.  01101000 >> 2 -> 011010(右側移出位被丟棄) -> 00011010(左側空位一律補0) 

與運算、或運算

與運算、或運算都是計算機中一種基本的邏輯運算方式。

  • 與運算：符號表示為&。運算規則：兩位同時為“1”，結果才為“1”，否則為0
  • 或運算：符號表示為|。運算規則：兩位只要有一位為“1”，結果就為“1”，否則為0

什么是base64編碼

Base64編碼是將字符串以每3個8比特(bit)的字節子序列拆分成4個6比特(bit)的字節(6比特有效字節，最左邊兩個永遠為0，其實也是8比特的字節)子序列，再將得到的子序列查找Base64的編碼索引表，得到對應的字符拼接成新的字符串的一種編碼方式。

每3個8比特(bit)的字節子序列拆分成4個6比特(bit)的字節的拆分過程如下圖所示：

base64

為什么base64編碼后的大小是原來的4/3倍

因為6和8的最大公倍數是24，所以3個8比特的字節剛好可以拆分成4個6比特的字節，38 = 64。計算機中，因為一個字節需要8個存儲單元存儲，所以我們要把6個比特往前面補兩位0，補足8個比特。如下圖所示：

很明顯，補足后所需的存儲單元為32個，是原來所需的24個的4/3倍。現在大家明白為什么base64編碼后的大小是原來的4/3倍了吧。

為什么命名為base64呢?

因為6位(bit)的二進制數有2的6次方個,也就是二進制數(00000000-00111111)之間的代表0-63的64個二進制數。

不是說一個字節是用8位二進制表示的嗎，為什么不是2的8次方?

因為我們得到的8位二進制數的前兩位永遠是0，真正的有效位只有6位，所以我們所能夠得到的二進制數只有2的6次方個。

Base64字符是哪64個?

Base64的編碼索引表，字符選用了"A-Z、a-z、0-9、+、/" 64個可打印字符來代表(00000000-00111111)這64個二進制數。即

let base64EncodeChars = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789+/'

編碼原理

我們不妨自己先思考一下，要把3個字節拆分成4個字節可以怎么做?你的實現思路和我的實現思路有哪個不同，我們之間又會碰出怎樣的火花?

流程圖

流程圖

思路

分析映射關系：abc -> xyzi。我們從高位到低位添加索引來分析這個過程

  • x: (前面補兩個0)a的前六位 => 00a7a6a5a4a3a2
  • y: (前面補兩個0)a的后兩位 + b的前四位 => 00a1a0b7b6b5b4
  • z: (前面補兩個0)b的后四位 + c的前兩位 => 00b3b2b1b0c7c6
  • i: (前面補兩個0)c的后六位 => 00c5c4c3c2c1c0通過上述的映射關系，我們很容易得到下面的實現思路：

1.將字符對應的ascII編碼轉為8位二進制數

2.將每三個8位二進制數進行以下操作

  • 將第一個數右移位2位，得到第一個6位有效位二進制數
  • 將第一個數 & 0x3之后左移位4位，得到第二個6位有效位二進制數的第一個和第二個有效位，將第二個數 & 0xf0之后右移位4位，得到第二個6位有效位二進制數的后四位有效位，兩者取且得到第二個6位有效位二進制
  • 將第二個數 & 0xf之后左移位2位，得到第三個6位有效位二進制數的前四位有效位，將第三個數 & 0xC0之后右移位6位，得到第三個6位有效位二進制數的后兩位有效位，兩者取且得到第三個6位有效位二進制
  • 將第三個數 & 0x3f，得到第四個6位有效位二進制數

3.將獲得的6位有效位二進制數轉十進制，查找對應base64字符

我們以hao字符串為例，觀察base64編碼的過程，我們將上面轉換通過代碼邏輯分析實現吧。

代碼實現

  1. // 輸入字符串 
  2. let str = 'hao' 
  3. // base64字符串 
  4. let base64EncodeChars = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789+/' 
  5. // 定義輸入、輸出字節的二進制數 
  6. let char1, char2, char3, out1, out2, out3, out4, out 
  7. // 將字符對應的ascII編碼轉為8位二進制數 
  8. char1 = str.charCodeAt(0) & 0xff // 104  01101000 
  9. char2 = str.charCodeAt(1) & 0xff // 97  01100001 
  10. char3 = str.charCodeAt(2) & 0xff // 111  01101111 
  11. // 輸出6位有效字節二進制數 
  12. 6out1 = char1 >> 2 // 26  011010 
  13. out2 = (char1 & 0x3) << 4 | (char2 & 0xf0) >> 4 // 6  000110 
  14. out3 = (char2 & 0xf) << 2 | (char3 & 0xc0) >> 6 // 5  000101 
  15. out4 = char3 & 0x3f // 47 101111 
  16.  
  17. out = base64EncodeChars[out1] + base64EncodeChars[out2] + base64EncodeChars[out3] + base64EncodeChars[out4] // aGFv 

算法剖析

1.out1: char1 >> 2

  1. 01101000 -> 00011010 

2.out2 = (char1 & 0x3) << 4 | (char2 & 0xf0) >> 4

  1. // 且運算 
  2. 01101000        01100001 
  3. 00000011        11110000 
  4. --------        -------- 
  5. 00000000        01100000 
  6.  
  7. // 移位運算后得 
  8. 00000000        00000110 
  9.  
  10. // 或運算 
  11. 00000000 
  12. 00000110 
  13. -------- 
  14. 00000110 

第三個字符第四個字符同理

整理上述代碼，擴展至多字符字符串

  1. // 輸入字符串 
  2. let str = 'haohaohao' 
  3. // base64字符串 
  4. let base64EncodeChars = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789+/' 
  5.  
  6. // 獲取字符串長度 
  7. let len = str.length 
  8. // 當前字符索引 
  9. let index = 0 
  10. // 輸出字符串 
  11. let out = '' 
  12. while(index < len) { 
  13.     // 定義輸入、輸出字節的二進制數 
  14.     let char1, char2, char3, out1, out2, out3, out4 
  15.     // 將字符對應的ascII編碼轉為8位二進制數 
  16.     char1 = str.charCodeAt(index++) & 0xff // 104  01101000 
  17.     char2 = str.charCodeAt(index++) & 0xff // 97  01100001 
  18.     char3 = str.charCodeAt(index++) & 0xff // 111  01101111 
  19.     // 輸出6位有效字節二進制數 
  20.     out1 = char1 >> 2 // 26  011010 
  21.     out2 = (char1 & 0x3) << 4 | (char2 & 0xf0) >> 4 // 6  000110 
  22.     out3 = (char2 & 0xf) << 2 | (char3 & 0xc0) >> 6 // 5  000101 
  23.     out4 = char3 & 0x3f // 47 101111 
  24.  
  25.     out = out + base64EncodeChars[out1] + base64EncodeChars[out2] + base64EncodeChars[out3] + base64EncodeChars[out4] // aGFv 
  26. } 

原字符串長度不是3的整倍數的情況，需要特殊處理

  1. ... 
  2. char1 = str.charCodeAt(index++) & 0xff // 104  01101000 
  3. if (index == len) { 
  4.     out2 = (char1 & 0x3) << 4 
  5.     out = out + base64EncodeChars[out1] + base64EncodeChars[out2] + '==' 
  6.     return out 
  7. } 
  8. char2 = str.charCodeAt(index++) & 0xff // 97  01100001 
  9. if (index == len) { 
  10.     out1 = char1 >> 2 // 26  011010 
  11.     out2 = (char1 & 0x3) << 4 | (char2 & 0xf0) >> 4 // 6  000110 
  12.     out3 = (char2 & 0xf) << 2 
  13.     out = out + base64EncodeChars[out1] + base64EncodeChars[out2] + base64EncodeChars[out3] + '=' 
  14.     return out 
  15. } 
  16. ... 

全部代碼

  1. function base64Encode(str) { 
  2.     // base64字符串 
  3.     let base64EncodeChars = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789+/' 
  4.  
  5.     // 獲取字符串長度 
  6.     let len = str.length 
  7.     // 當前字符索引 
  8.     let index = 0 
  9.     // 輸出字符串 
  10.     let out = '' 
  11.     while(index < len) { 
  12.         // 定義輸入、輸出字節的二進制數 
  13.         let char1, char2, char3, out1, out2, out3, out4 
  14.         // 將字符對應的ascII編碼轉為8位二進制數 
  15.         char1 = str.charCodeAt(index++) & 0xff 
  16.         out1 = char1 >> 2 
  17.         if (index == len) { 
  18.             out2 = (char1 & 0x3) << 4 
  19.             out = out + base64EncodeChars[out1] + base64EncodeChars[out2] + '==' 
  20.             return out 
  21.         } 
  22.         char2 = str.charCodeAt(index++) & 0xff 
  23.         out2 = (char1 & 0x3) << 4 | (char2 & 0xf0) >> 4  
  24.         if (index == len) { 
  25.             out3 = (char2 & 0xf) << 2 
  26.             out = out + base64EncodeChars[out1] + base64EncodeChars[out2] + base64EncodeChars[out3] + '=' 
  27.             return out 
  28.         } 
  29.         char3 = str.charCodeAt(index++) & 0xff 
  30.         // 輸出6位有效字節二進制數 
  31.         out3 = (char2 & 0xf) << 2 | (char3 & 0xc0) >> 6 
  32.         out4 = char3 & 0x3f 
  33.  
  34.         out = out + base64EncodeChars[out1] + base64EncodeChars[out2] + base64EncodeChars[out3] + base64EncodeChars[out4] 
  35.     } 
  36.     return out 
  37. } 
  38. base64Encode('haohao') // aGFvaGFv 
  39. base64Encode('haoha') // aGFvaGE= 
  40. base64Encode('haoh') // aGFvaA== 

解碼原理

逆向推導，由每4個6位有效位的二進制數合并成3個8位二進制數，根據ascII編碼映射到對應字符后拼接字符串

思路

  • 分析映射關系 xyzi -> abc
  • a: x后六位 + y第三、四位 => x5x4x3x2x1x0y5y4
  • b: y后四位 + z第三、四、五、六位 => y3y2y1y0z5z4z3z2

1.c: z后兩位 + i后六位 => z1z0i5i4i3i2i1i0

2.將字符對應的base64字符集的索引轉為6位有效位二進制數

將每四個6位有效位二進制數進行以下操作

第一個二進制數左移位2位，得到新二進制數的前6位，第二個二進制數 & 0x30之后右移位4位，或運算后得到第一個新二進制數

第二個二進制數 & 0xf之后左移位4位，第三個二進制數 & 0x3c之后右移位2位，或運算后得到第二個新二進制數

第二個二進制數 & 0x3之后左移位6位，與第四個二進制數或運算后得到第二個新二進制數

3.根據ascII編碼映射到對應字符后拼接字符串

代碼實現

  1. // base64字符串 
  2. let str = 'aGFv' 
  3. // base64字符集 
  4. let base64CharsArr = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789+/'.split('') 
  5. // 獲取索引值 
  6. let char1 = base64CharsArr.findIndex(char => char==str[0]) & 0xff // 26  011010 
  7. let char2 = base64CharsArr.findIndex(char => char==str[1]) & 0xff // 6  000110 
  8. let char3 = base64CharsArr.findIndex(char => char==str[2]) & 0xff // 5  000101 
  9. let char4 = base64CharsArr.findIndex(char => char==str[3]) & 0xff // 47  101111 
  10. let out1, out2, out3, out 
  11. // 位運算 
  12. out1 = char1 << 2 | (char2 & 0x30) >> 4 
  13. out2 = (char2 & 0xf) << 4 | (char3 & 0x3c) >> 2 
  14. out3 = (char3 & 0x3) << 6 | char4 
  15. console.log(out1, out2, out3) 
  16. out = String.fromCharCode(out1) + String.fromCharCode(out2) + String.fromCharCode(out3) 

遇到有用'='補過位的情況時

  1. function base64decode(str) { 
  2.     // base64字符集 
  3.     let base64CharsArr = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789+/'.split('') 
  4.     let char1 = base64CharsArr.findIndex(char => char==str[0]) 
  5.     let char2 = base64CharsArr.findIndex(char => char==str[1]) 
  6.     let out1, out2, out3, out 
  7.     if (char1 == -1 || char2 == -1) return out 
  8.     char1 = char1 & 0xff 
  9.     char2 = char2 & 0xff 
  10.     let char3 = base64CharsArr.findIndex(char => char==str[2]) 
  11.     // 第三位不在base64對照表中時，只拼接第一個字符串 
  12.     if (char3 == -1) { 
  13.         out1 = char1 << 2 | (char2 & 0x30) >> 4 
  14.         out = String.fromCharCode(out1) 
  15.         return out 
  16.     } 
  17.     let char4 = base64CharsArr.findIndex(char => char==str[3]) 
  18.     // 第三位不在base64對照表中時，只拼接第一個和第二個字符串 
  19.     if (char4 == -1) { 
  20.         out1 = char1 << 2 | (char2 & 0x30) >> 4 
  21.         out2 = (char2 & 0xf) << 4 | (char3 & 0x3c) >> 2 
  22.         out = String.fromCharCode(out1) + String.fromCharCode(out2) 
  23.         return out 
  24.     } 
  25.     // 位運算 
  26.     out1 = char1 << 2 | (char2 & 0x30) >> 4 
  27.     out2 = (char2 & 0xf) << 4 | (char3 & 0x3c) >> 2 
  28.     out3 = (char3 & 0x3) << 6 | char4 
  29.     console.log(out1, out2, out3) 
  30.     out = String.fromCharCode(out1) + String.fromCharCode(out2) + String.fromCharCode(out3) 
  31.     return out 
  32. } 

解碼整個字符串，整理代碼后

  1. function base64decode(str) { 
  2.     // base64字符集 
  3.     let base64CharsArr = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789+/'.split('') 
  4.     let i = 0 
  5.     let len = str.length 
  6.     let out = '' 
  7.     while(i < len) { 
  8.         let char1 = base64CharsArr.findIndex(char => char==str[i]) 
  9.         i++ 
  10.         let char2 = base64CharsArr.findIndex(char => char==str[i]) 
  11.         i++ 
  12.         let out1, out2, out3 
  13.         if (char1 == -1 || char2 == -1) return out 
  14.         char1 = char1 & 0xff 
  15.         char2 = char2 & 0xff 
  16.         let char3 = base64CharsArr.findIndex(char => char==str[i]) 
  17.         i++ 
  18.         // 第三位不在base64對照表中時，只拼接第一個字符串 
  19.         out1 = char1 << 2 | (char2 & 0x30) >> 4 
  20.         if (char3 == -1) { 
  21.             out = out + String.fromCharCode(out1) 
  22.             return out 
  23.         } 
  24.         let char4 = base64CharsArr.findIndex(char => char==str[i]) 
  25.         i++ 
  26.         // 第三位不在base64對照表中時，只拼接第一個和第二個字符串 
  27.         out2 = (char2 & 0xf) << 4 | (char3 & 0x3c) >> 2 
  28.         if (char4 == -1) { 
  29.             out = out + String.fromCharCode(out1) + String.fromCharCode(out2) 
  30.             return out 
  31.         } 
  32.         // 位運算 
  33.         out3 = (char3 & 0x3) << 6 | char4 
  34.         console.log(out1, out2, out3) 
  35.         out = out + String.fromCharCode(out1) + String.fromCharCode(out2) + String.fromCharCode(out3) 
  36.     } 
  37.     return out 
  38. } 
  39. base64decode('aGFvaGFv') // haohao 
  40. base64decode('aGFvaGE=') // haoha 
  41. base64decode('aGFvaA==') // haoh 

上述解碼核心是字符與base64字符集索引的映射，網上看到過使用AccII編碼索引映射base64字符索引的方法

  1. let base64DecodeChars = [-1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, 62, -1, -1, -1, 63, 52, 53, 54, 55, 56, 57, 58, 59, 60, 61, -1, -1, -1, -1, -1, -1, -1, 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 21, 22, 23, 24, 25, -1, -1, -1, -1, -1, -1, 26, 27, 28, 29, 30, 31, 32, 33, 34, 35, 36, 37, 38, 39, 40, 41, 42, 43, 44, 45, 46, 47, 48, 49, 50, 51, -1, -1, -1, -1, -1] 
  2. //  
  3. let char1 = 'hao'.charCodeAt(0) // h -> 104 
  4. base64DecodeChars[char1] // 33 -> base64編碼表中的h 

由此可見，base64DecodeChars對照accII編碼表的索引存放的是base64編碼表的對應字符的索引。

總結

說起Base64編碼可能有些奇怪，因為大多數的編碼都是由字符轉化成二進制的過程，而從二進制轉成字符的過程稱為解碼。而Base64的概念就恰好反了，由二進制轉到字符稱為編碼，由字符到二進制稱為解碼。Base64 是一種數據編碼方式，可做簡單加密使用，我們可以改變base64編碼映射順序來形成自己獨特的加密算法進行加密解密。

編碼表

 

責任編輯：武曉燕 來源： 大轉轉FE
編碼Base64解碼
相關推薦

2014-02-20 10:28:28

JavaScriptBase64

2019-07-23 08:55:46

Base64編碼底層

2024-07-31 10:22:49

Go語言編碼

2025-02-11 00:00:10

Base64編碼二進制

2024-07-11 08:42:57

2022-10-29 19:58:09

Base64Bashshell

2023-03-01 11:02:12

2024-02-28 23:07:42

GolangBase64編碼

2023-11-07 08:35:26

2021-03-05 09:10:19

base64編碼

2021-08-26 05:27:08

Base64 字節流算法

2022-06-06 08:31:05

Base64編碼Base58

2019-08-09 11:40:38

JavaScriptCSS技術

2020-12-04 06:37:19

HTTPS原理安全

2016-12-13 13:50:06

JAVA轉換Base64

2021-02-05 05:26:33

字節ASCII控制

2021-11-25 08:11:47

JS網站信息

2010-03-03 16:14:05

Python base

2018-11-30 09:03:55

HTTP緩存Web

2019-11-08 16:05:54

Promise前端鏈式調用
點贊
收藏

51CTO技術棧公眾號

主站蜘蛛池模板： 国产区在线免费观看 | 中文字幕乱码一区二区三区 | www国产成人免费观看视频,深夜成人网 | 蜜桃视频麻豆 | 狠狠做六月爱婷婷综合aⅴ 国产精品视频网 | 欧美精品网站 | 国产乱码久久久久久 | 国产精品一卡二卡三卡 | 成人国产精品色哟哟 | 亚洲视频一区在线播放 | 国产精品久久久久久 | 国产成人一区二区三区 | 日韩成人高清在线 | 国产传媒视频在线观看 | 一级a毛片| 成人av网站在线观看 | 视频一二三区 | 91国在线 | 午夜伦理影院 | 中文字幕av一区 | 色男人的天堂 | 亚洲一二视频 | 久久久久国产一区二区三区四区 | 国产色网 | 一区二区三 | 一区二区三区中文字幕 | 国产粉嫩尤物极品99综合精品 | 国产成人精品高清久久 | 亚洲一区 中文字幕 | 欧美区日韩区 | 91精产国品一二三区 | 三级成人片 | 久久精品欧美一区二区三区不卡 | 色影视| 亚洲欧美中文日韩在线v日本 | 亚洲一区二区电影网 | a级在线免费观看 | 97精品一区二区 | 色五月激情五月 | 黄片毛片 | 久久久高清|