使用 JavaScript atob 解碼 Base64 函數：處理 UTF-8

JavaScript 的 atob() 函數旨在解碼 Base64 編碼的字串。使用者在解碼 UTF-8 編碼字串時可能會遇到問題，導致產生 ASCII 編碼字元而不是正確的 UTF-8 表示形式。

挑戰：理解 Unicode 問題

Base64 需要二進位資料作為輸入，JavaScript將字元佔據一個位元組的字串視為二進位資料。然而，在 UTF-8 編碼的字串中，字元佔用超過 1 個位元組時，會在編碼過程中觸發異常。

解決方案1：二進位互通性

建議的修復方法是對二進位字串進行編碼和解碼：

將UTF-8 編碼為二進位

function toBinary(string) {
  const codeUnits = new Uint16Array(string.length);
  for (let i = 0; i 
將二進位解碼為 UTF-8
function fromBinary(encoded) {
  const binary = atob(encoded);
  const bytes = new Uint8Array(binary.length);
  for (let i = 0; i 
此解決方案將原始 UTF-8 字串轉換為二進位表示形式，保留 UTF-16 編碼（JavaScript 中的本機表示形式）。 
解決方案2：ASCII Base64 互通性
專注於UTF-8 互通性的替代解決方案是維護純文字base64 字串：
編碼UTF-8 轉Base64
function b64EncodeUnicode(str) {    
  return btoa(encodeURIComponent(str).replace(/%([0-9A-F]{2})/g,
    function toSolidBytes(match, p1) {
      return String.fromCharCode('0x'   p1);
  }));
}
解碼 Base64 為 UTF-8
function b64DecodeUnicode(str) {
  return decodeURIComponent(atob(str).split('').map(function(c) {
    return '%'   ('00'   c.charCodeAt(0).toString(16)).slice(-2);
  }).join(''));
}
此解決方案可有效處理 UTF-8 編碼的字串，而不改變其表示形式。 
TypeScript 支援
// Encoding UTF-8 ⇢ base64

function b64EncodeUnicode(str) {
    return btoa(encodeURIComponent(str).replace(/%([0-9A-F]{2})/g, function(match, p1) {
        return String.fromCharCode(parseInt(p1, 16))
    }))
}

// Decoding base64 ⇢ UTF-8

function b64DecodeUnicode(str) {
    return decodeURIComponent(Array.prototype.map.call(atob(str), function(c) {
        return '%'   ('00'   c.charCodeAt(0).toString(16)).slice(-2)
    }).join(''))
}
歷史解決方案（已棄用）
function utf8_to_b64( str ) {
  return window.btoa(unescape(encodeURIComponent( str )));
}

function b64_to_utf8( str ) {
  return decodeURIComponent(escape(window.atob( str )));
}
雖然仍然有效，但這種方法現在在現代瀏覽器中已被棄用。