JavaScript 中的 Base64 編碼和解碼

Base64 是一種廣泛使用的二進製到文本編碼方案，通過將二進制數據轉換為 radix-64 表示形式，將其轉換為等效的 ASCII 字符集。它通常用於在不兼容傳輸二進制數據的媒體上編碼和傳輸數據。 Base64 確保二進制數據在傳輸過程中不會發生變化。

重要的是要記住 Base64 不是 一種加密或壓縮方案。它僅將二進制數據轉換為 ASCII 字符集，這對於在網絡上傳輸混淆字符串非常有用。例如，一個常見的例子是將圖像或任何其他二進製文件發送到通常需要文本數據的電子郵件服務器。您必須先將二進製文件編碼為文本格式，最好是 ASCII。

在本文中，您將了解如何編碼和解碼 Base64 字符串 在 JavaScript 中。 JavaScript 中有兩個內置函數用於將原始二進制數據編碼和解碼為 Base64 字符串。

btoa() — Base64 編碼

btoa() 函數（代表 binary-to-ASCII）用於從二進制數據創建 Base64 編碼的 ASCII 字符串。它接受二進製字符串作為參數並返回 Base64 編碼的 ASCII 字符串。

下面的例子展示瞭如何使用 btoa() 在 JavaScript 中對字符串進行 Base64 編碼：

const str = "JavaScript is fun!!";

// encode the string
const encodedStr = btoa(str);

// print encoded string
console.log(encodedStr);

// output: SmF2YVNjcmlwdCBpcyBmdW4hIQ==

默認情況下，btoa() 方法適用於由 8 位字節組成的二進制數據。如果您的輸入數據包含任何超過 8 位的字符，例如，Unicode 字符，btoa() 函數會拋出異常。

這是一個例子：

const str = "JavaScript is fun 🎉";

// encode the string
const encodedStr = btoa(str);

// print encoded string
console.log(encodedStr);

如果你執行上面的代碼，你應該會看到如下錯誤輸出：

Uncaught DOMException: Failed to execute 'btoa' on 'Window': The string to be encoded contains characters outside of the Latin1 range.

要對 Unicode 字符進行編碼，首先需要將輸入字符串轉義為 8 位字節數組（如 UTF-8），然後使用 btoa() 將其編碼為 Base64，如下例所示：

function encodeUnicode(str) {
  // first we use encodeURIComponent to get percent-encoded UTF-8,
  // then we convert the percent encodings into raw bytes which
  // can be fed into btoa.
  return btoa(encodeURIComponent(str).replace(/%([0-9A-F]{2})/g,
      function toSolidBytes(match, p1) {
          return String.fromCharCode('0x' + p1);
  }));
}

encodeUnicode('JavaScript is fun 🎉'); // SmF2YVNjcmlwdCBpcyBmdW4g8J+OiQ==
encodeUnicode('🔥💡'); // 8J+UpfCfkqE=

atob() — Base64 解碼

atob() 函數（代表 ASCII 到二進制）將使用 Base64 編碼編碼的數據字符串解碼回 JavaScript 中的普通文本。這是一個示例，展示瞭如何使用 atob() 解碼 Base64 編碼字符串：

const encodedStr = "SmF2YVNjcmlwdCBpcyBmdW4hIQ==";

// decode the string
const str = atob(encodedStr);

// print decoded string
console.log(str);

// output: JavaScript is fun!!

atob() 如果 Base64 編碼的輸入字符串只有 8 位字節，則函數可以完美運行。但是，如果編碼的輸入包含 16 位 Unicode 字符，則無法正確解碼，如下例所示：

// Encode String: 'JavaScript is fun 🎉'
const encodedStr = "SmF2YVNjcmlwdCBpcyBmdW4g8J+OiQ==";

// decode the string
const str = atob(encodedStr);

// print decoded string
console.log(str);

// output: JavaScript is fun 🎉

正如您在上面看到的，Unicode 字符未正確解碼。要處理 Unicode DOM 字符串，您必須將 Base64 編碼字節轉換為百分比編碼字符串，然後使用 decodeURIComponent() 解碼百分比編碼字符串 像下面這樣：

function decodeUnicode(str) {
  // Going backwards: from bytestream, to percent-encoding, to original string.
  return decodeURIComponent(atob(str).split('').map(function (c) {
    return '%' + ('00' + c.charCodeAt(0).toString(16)).slice(-2);
  }).join(''));
}

decodeUnicode('SmF2YVNjcmlwdCBpcyBmdW4g8J+OiQ=='); // JavaScript is fun 🎉
decodeUnicode('8J+UpfCfkqE='); // 🔥💡

結論

這就是 JavaScript 中 Base64 編碼和解碼的全部內容。 Base64 是一種廣泛使用的編碼方案，用於在網絡上將二進制數據作為 ASCII 字符流安全地傳輸。

當然，您仍然可以選擇通過網絡發送二進制數據。但有時可能會有風險，因為並非所有應用程序和網絡通信設備都可以處理原始二進制數據。另一方面，對於大多數應用程序來說，ASCII 字符集處理起來非常簡單。

有關 Base64 編碼和解碼的更多信息，請查看此 MDN 指南。