Codieren und Decodieren einer Zeichenkette in Base64 in JavaScript
Der Base64-Kodierungszeichensatz besteht aus A-Z, a-z , 0-9, + und /. Insgesamt gibt es in diesem System 64 Zeichen, daher wird es als Base64 bezeichnet. Die Base64-Codierung konvertiert Daten in das ASCII-Format (American Standard Code for Information Interchange).
Beispiel: Wenn Sie eine Zeichenkette Git haben, wird diese Zeichenkette im Base64-Kodierungsformat als R29vZ2xl dargestellt.
Was hier gerade passiert ist, ist, dass die einzelnen Zeichen des Strings zuerst in ihren ASCII-Wert dargestellt werden, dh für das große G ist der ASCII-Wert 71, für das kleine i der ASCII-Wert 105, und ähnlich auch für andere Charaktere. Um eine vollständige Liste der ASCII-Werte zu erhalten, besuchen Sie diesen Link.
Anschließend werden diese ASCII-Werte in eine 8-Bit-Binärdarstellung umgewandelt. Diese 8-Bit-Binärdarstellung wird dann in vier 6-Bit-Segmente unterteilt. Diese vier binären Segmente werden dann in Dezimalzahlen umgewandelt.
Am Ende werden diese Dezimalzahlen in Base64 umgewandelt, indem man der Base64-Codierungstabelle folgt.
Jetzt müssen wir nicht alle diese Konvertierungen manuell durchführen. Was wir bisher gesehen haben, dient nur dem Verständnis. Sehen wir uns an, wie Sie einen String in Base64 codieren und decodieren.
Codieren und Decodieren einer Zeichenkette in Base64 in JavaScript
In JavaScript haben wir zwei Base64-Hilfsfunktionen, btoa() und atob(), um einen String in die Base64-Codierung umzuwandeln und umgekehrt. btoa() nimmt einen String und kodiert ihn in Base64, und atob() nimmt einen kodierten String und dekodiert ihn.
Im folgenden Code haben wir zwei div-Elemente, in denen wir die kodierte und dekodierte Zeichenkette anzeigen. Wir speichern die Referenzen dieser beiden div in myDiv_1 und myDiv_2 mit der Methode getElementById() in JavaScript. Der String, den wir in diesem Beispiel kodieren und dekodieren werden, ist Git, der in der Variablen str gespeichert ist.
Um diesen String zu codieren, verwenden wir die Funktion btoa(). Übergeben Sie dazu einfach die Variable str als Parameter an diese Funktion. Das Ergebnis speichern wir in der Variablen encodedStr. Dann werden wir den Wert dieser Variablen innerhalb von div_1 mit der Eigenschaft myDiv_1.innerHTML anzeigen.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Document</title>
</head>
<body>
<div id="div_1"></div>
<div id="div_2"></div>
<script>
let myDiv_1 = document.getElementById('div_1');
let myDiv_2 = document.getElementById('div_2');
let str = "Git";
let encodedStr = btoa(str);
myDiv_1.innerHTML = encodedStr;
</script>
</body>
</html>
Ausgabe:
R2l0
Dies ist, was Sie als Ausgabe erhalten. Der String wird nicht in Base64 konvertiert.
Um nun den obigen String in seine ursprüngliche Form zu entschlüsseln, können Sie die Funktion atob() verwenden und darin den encodedStr übergeben. Zeigen Sie dann den Wert der Variablen decodedStr innerhalb von div_2 mit der Eigenschaft myDiv_2.innerHTML an.
let decodedStr = atob(encodedStr);
myDiv_2.innerHTML = decodedStr;
Ausgabe:
Git
Beachten Sie, dass Base64 zum Senden von Binärdaten verwendet wird und keine Verschlüsselungsmethode ist. Außerdem handelt es sich nicht um eine Komprimierungsmethode.
Sahil is a full-stack developer who loves to build software. He likes to share his knowledge by writing technical articles and helping clients by working with them as freelance software engineer and technical writer on Upwork.
LinkedIn