Wie dekodiert man UTF-8-Base64-Strings in JavaScript mit „atob“ und vermeidet dabei Codierungsfehler?

Verwenden von atob zum Dekodieren von Base64 aus gängigen Textquellen

Beim Verwenden von atob zum Dekodieren von API-Antwortzeichenfolgen von Diensten, die ihre Ausgabe in UTF-8 generieren, können Fehler auftreten oder defekte String-Kodierungen. Dies liegt an den Einschränkungen der Base64-Verarbeitung von JavaScript:

<code class="js">const notOK = "✓"
console.log(btoa(notOK)); // error</code>

Das Unicode-Problem

Auch nachdem dieser Fehler in ECMAScript behoben wurde, bleibt das „Unicode-Problem“ bestehen, da Base64 eine Binärdatei ist Format, das davon ausgeht, dass jedes codierte Zeichen ein einzelnes Byte belegt. Viele Unicode-Zeichen erfordern mehr als ein Byte zum Kodieren, was zu Kodierungsfehlern führen kann.

Quelle: MDN (2021)

<code class="js">const ok = "a";
console.log(ok.codePointAt(0).toString(16)); // 0x61: occupies 1 byte

const notOK = "✓";
console.log(notOK.codePointAt(0).toString(16)); // 0x2713: occupies 2 bytes</code>

Lösung mit binärer Interoperabilität

Wenn Sie sich nicht sicher sind, welche Lösung Sie wählen sollen, ist dies wahrscheinlich die richtige für Sie. Scrollen Sie weiter, um die ASCII-Base64-Lösung und den Verlauf dieser Antwort zu erhalten.

Erwägen Sie die Verwendung eines binären Ansatzes, indem Sie UTF-8-Zeichenfolgen in binäre Darstellungen konvertieren und umgekehrt.

Kodierung UTF-8 ⇢ binär

<code class="js">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)));
}
encoded = toBinary("✓ à la mode") // "EycgAOAAIABsAGEAIABtAG8AZABlAA=="</code>

Dekodierung binär ⇢ UTF-8

<code class="js">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));
}
decoded = fromBinary(encoded) // "✓ à la mode"</code>

Lösung mit ASCII-Base64-Interoperabilität

Um die UTF-8-Funktionalität zu bewahren, ein weiterer Ansatz durch Es wird ASCII-Base64-Interoperabilität empfohlen, die das „Unicode-Problem“ behebt und gleichzeitig die Kompatibilität mit textbasierten Base64-Zeichenfolgen aufrechterhält.

Codierung UTF-8 ⇢ ASCII base64

<code class="js">function b64EncodeUnicode(str) {
    // Percent-encode Unicode, then convert to byte array
    return btoa(encodeURIComponent(str).replace(/%([0-9A-F]{2})/g,
        function(match, p1) {
            return String.fromCharCode('0x' + p1);
    }));
}
b64EncodeUnicode('✓ à la mode'); // "4pyTIMOgIGxhIG1vZGU="</code>

Dekodierung ASCII Base64 ⇢ UTF -8

<code class="js">function b64DecodeUnicode(str) {
    // Convert byte array to percent-encoding, then decode
    return decodeURIComponent(atob(str).split('').map(function(c) {
        return '%' + ('00' + c.charCodeAt(0).toString(16)).slice(-2);
    }).join(''));
}
b64DecodeUnicode('4pyTIMOgIGxhIG1vZGU='); // "✓ à la mode"</code>

TypeScript-Unterstützung

<code class="ts">function b64EncodeUnicode(str) {
    return btoa(encodeURIComponent(str).replace(/%([0-9A-F]{2})/g, function(match, p1) {
        return String.fromCharCode(parseInt(p1, 16))
    }))
}
function b64DecodeUnicode(str) {
    return decodeURIComponent(Array.prototype.map.call(atob(str), function(c) {
        return '%' + ('00' + c.charCodeAt(0).toString(16)).slice(-2)
    }).join(''))
}</code>

Zusätzliche Hinweise

• Für die Dekodierung von Base64-Strings aus Quellen wie der GitHub-API kann die Entfernung von Leerzeichen erforderlich sein Safari.
• Bibliotheken wie js-base64 und base64-js bieten ebenfalls zuverlässige Lösungen.

Das obige ist der detaillierte Inhalt vonWie dekodiert man UTF-8-Base64-Strings in JavaScript mit „atob“ und vermeidet dabei Codierungsfehler?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!