Decodificar Base64 usando la función atob de JavaScript: manejo de UTF-8

La función atob() de JavaScript está diseñada para decodificar cadenas codificadas en base64. Los usuarios pueden encontrar problemas al decodificar cadenas codificadas en UTF-8, lo que da como resultado caracteres codificados en ASCII en lugar de una representación UTF-8 adecuada.

Desafío: comprender el problema de Unicode

Base64 espera datos binarios como entrada , y JavaScript considera cadenas con caracteres que ocupan un byte como datos binarios. Sin embargo, los caracteres que ocupan más de un byte en cadenas codificadas en UTF-8 desencadenan excepciones durante la codificación.

Solución 1: Interoperabilidad binaria

La solución recomendada es codificar y decodificar cadenas binarias:

Codificación de UTF-8 a binario

function toBinary(string) {
  const codeUnits = new Uint16Array(string.length);
  for (let i = 0; i 
Decodificación binaria a UTF-8
function fromBinary(encoded) {
  const binary = atob(encoded);
  const bytes = new Uint8Array(binary.length);
  for (let i = 0; i 
Esta solución convierte la cadena UTF-8 original en una representación binaria, preservando la codificación UTF-16, una representación nativa en JavaScript.
Solución 2: interoperabilidad ASCII Base64
Una solución alternativa centrada en la interoperabilidad UTF-8 es mantener cadenas de texto sin formato base64:
Codificación de UTF-8 a Base64
function b64EncodeUnicode(str) {    
  return btoa(encodeURIComponent(str).replace(/%([0-9A-F]{2})/g,
    function toSolidBytes(match, p1) {
      return String.fromCharCode('0x'   p1);
  }));
}
Decodificación de Base64 a UTF-8
function b64DecodeUnicode(str) {
  return decodeURIComponent(atob(str).split('').map(function(c) {
    return '%'   ('00'   c.charCodeAt(0).toString(16)).slice(-2);
  }).join(''));
}
Esta solución maneja eficientemente cadenas codificadas en UTF-8 sin alterar su representación.
Compatibilidad con 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(''))
}
Solución histórica (obsoleta)
function utf8_to_b64( str ) {
  return window.btoa(unescape(encodeURIComponent( str )));
}

function b64_to_utf8( str ) {
  return decodeURIComponent(escape(window.atob( str )));
}
Aunque sigue siendo funcional, este enfoque ahora está obsoleto en los navegadores modernos.