Base64 編碼原理與應用：一篇搞懂二進位轉文字
在 Web 開發和資料傳輸中，你經常會遇到 Base64 編碼。無論是嵌入圖片、傳送電子郵件附件，還是處理 API 認證，Base64 都扮演著關鍵角色。本文將深入解析 Base64 的運作原理及其常見應用。
什麼是 Base64？
Base64 是一種將二進位資料轉換為純文字（ASCII 字元）的編碼方式。它使用 64 個可列印字元（A-Z、a-z、0-9、+、/）加上填充字元（=）來表示任意的二進位資料。
Base64 的名稱來自於它使用的字元集大小：2^6 = 64。每 6 個位元對應一個 Base64 字元，因此每 3 個位元組（24 位元）的原始資料會被編碼為 4 個 Base64 字元。
Base64 編碼原理
Base64 的編碼過程可以分為以下步驟：
- 將原始資料轉換為二進位位元流
- 每 6 個位元為一組（而非傳統的 8 位元）
- 將每組 6 位元對應到 Base64 字元表中的字元
- 如果最後不足 6 位元，補零後再對應，並在結果末尾加上
=填充
| 原始資料 | 二進位 | Base64 字元 | 結果 |
|---|---|---|---|
| Man | 01001101 01100001 01101110 | TWFu | TWFu |
| Ma | 01001101 01100001 | TWE= | TWE= |
| M | 01001101 | TQ== | TQ== |
重要觀念：Base64 編碼會使資料量增加約 33%（4/3 倍）。這是因為每 3 個位元組被編碼為 4 個字元。這個開銷是使用 Base64 時需要考量的重要因素。
為什麼需要 Base64？
Base64 存在的主要原因是：許多通訊協定和系統只能安全地處理文字資料，無法直接傳輸二進位資料。
1. 電子郵件（MIME）
SMTP 電子郵件協定最初設計時只支援 7-bit ASCII 文字。為了在郵件中傳送圖片、文件等二進位附件，MIME 標準（RFC 2045）引入了 Base64 編碼作為傳輸編碼方式。
2. Web 開發中的 Data URI
在 HTML 和 CSS 中，可以使用 Data URI 將小型資源（如圖示、小圖片）以 Base64 編碼直接嵌入程式碼中，減少額外的 HTTP 請求。
3. API 認證
HTTP Basic Authentication 使用 Base64 來編碼使用者名稱和密碼的組合。雖然 Base64 不提供任何安全性，但它確保認證資訊可以安全地透過 HTTP 標頭傳輸。
4. JSON 中的二進位資料
由於 JSON 不支援二進位資料型別，當需要在 JSON 中傳輸二進位內容時，通常會先將其編碼為 Base64 字串。
JavaScript 中的 Base64
瀏覽器提供了兩個內建函式來處理 Base64：
- btoa() — 將字串編碼為 Base64（Binary to ASCII）
- atob() — 將 Base64 解碼為字串（ASCII to Binary）
需要注意的是，btoa() 只能處理 Latin-1 字元。如果要處理 Unicode 字串（如中文），需要先進行 UTF-8 編碼轉換。
Base64 的變體
| 變體 | 字元集 | 用途 |
|---|---|---|
| 標準 Base64 | A-Z, a-z, 0-9, +, / | 一般用途 |
| URL-safe Base64 | A-Z, a-z, 0-9, -, _ | URL 和檔名 |
| Base32 | A-Z, 2-7 | 不區分大小寫的場景 |
| Base16 (Hex) | 0-9, A-F | 十六進位表示 |
使用工具快速編碼解碼
在開發過程中，經常需要快速將資料進行 Base64 編碼或解碼。使用我們的線上工具，一鍵完成轉換：
立即使用 Base64 編碼/解碼工具 →結語
Base64 是一項看似簡單卻無處不在的基礎技術。理解它的原理和適用場景，能幫助你在開發中更有效率地處理資料傳輸和編碼問題。
參考文獻
- Josefsson, S. "The Base16, Base32, and Base64 Data Encodings." IETF RFC 4648, 2006. https://datatracker.ietf.org/doc/html/rfc4648
- Freed, N. & Borenstein, N. "Multipurpose Internet Mail Extensions (MIME) Part One." IETF RFC 2045, 1996. https://datatracker.ietf.org/doc/html/rfc2045
- Mozilla Developer Network. "btoa() global function." MDN Web Docs. https://developer.mozilla.org/en-US/docs/Web/API/btoa
- Mozilla Developer Network. "atob() global function." MDN Web Docs. https://developer.mozilla.org/en-US/docs/Web/API/atob