Comment décoder les chaînes Base64 en JavaScript tout en gérant l'encodage UTF-8 ?

Décoder Base64 à l'aide de la fonction JavaScript atob : gestion de l'UTF-8

La fonction atob() de JavaScript est conçue pour décoder les chaînes codées en base64. Les utilisateurs peuvent rencontrer des problèmes lors du décodage des chaînes codées en UTF-8, ce qui entraîne des caractères codés en ASCII au lieu d'une représentation UTF-8 appropriée.

Défi : Comprendre le problème Unicode

Base64 attend des données binaires en entrée , et JavaScript considère les chaînes dont les caractères occupent un octet comme des données binaires. Cependant, les caractères occupant plus d'un octet dans les chaînes codées en UTF-8 déclenchent des exceptions lors du codage.

Solution 1 : Interopérabilité binaire

La solution recommandée consiste à encoder et décoder des chaînes binaires :

Encodage d'UTF-8 en binaire

function toBinary(string) {
  const codeUnits = new Uint16Array(string.length);
  for (let i = 0; i < codeUnits.length; i++) {
    codeUnits[i] = string.charCodeAt(i);
  }
  return btoa(String.fromCharCode(...new Uint8Array(codeUnits.buffer)));
}

Décodage de binaire en UTF-8

function fromBinary(encoded) {
  const binary = atob(encoded);
  const bytes = new Uint8Array(binary.length);
  for (let i = 0; i < bytes.length; i++) {
    bytes[i] = binary.charCodeAt(i);
  }
  return String.fromCharCode(...new Uint16Array(bytes.buffer));
}

Cette solution convertit la chaîne UTF-8 d'origine en une représentation binaire, en préservant l'encodage UTF-16, une représentation native en JavaScript.

Solution 2 : Interopérabilité ASCII Base64

Une solution alternative axée sur l'interopérabilité UTF-8 consiste à conserver les chaînes en texte brut base64 :

Encodage d'UTF-8 en Base64

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

Décodage de Base64 en UTF-8

function b64DecodeUnicode(str) {
  return decodeURIComponent(atob(str).split('').map(function(c) {
    return '%' + ('00' + c.charCodeAt(0).toString(16)).slice(-2);
  }).join(''));
}

Cette solution gère efficacement les chaînes codées en UTF-8 sans altérer leur représentation.

Prise en charge de 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(''))
}

Solution historique (obsolète)

function utf8_to_b64( str ) {
  return window.btoa(unescape(encodeURIComponent( str )));
}

function b64_to_utf8( str ) {
  return decodeURIComponent(escape(window.atob( str )));
}

Bien que toujours fonctionnelle, cette approche est désormais obsolète dans les navigateurs modernes.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!