Encoder et décoder une chaîne en Base64 en JavaScript
Le jeu de caractères d’encodage Base64 se compose de A-Z, a-z, 0-9, + et /. Au total, il y a 64 caractères dans ce système, et il est donc connu sous le nom de Base64. L’encodage Base64 convertit les données au format ASCII (American Standard Code for Information Interchange).
Par exemple, si vous avez une chaîne Git, alors au format d’encodage Base64, cette chaîne sera représentée par R29vZ2xl.
Ce qui vient de se passer ici, c’est que les caractères individuels de la chaîne sont d’abord représentés dans leur valeur ASCII, c’est-à-dire que pour la majuscule G, sa valeur ASCII est 71, pour le petit i, sa valeur ASCII est 105, et de même pour les autres personnages. Pour obtenir une liste complète des valeurs ASCII, visitez ce lien.
Ensuite, ces valeurs ASCII sont converties en une représentation binaire à 8 bits. Cette représentation binaire de 8 bits est ensuite divisée en quatre segments de 6 bits. Ces quatre segments binaires sont ensuite convertis en décimales.
Au final, ces nombres décimaux sont convertis en Base64 en suivant la table d’encodage Base64.
Maintenant, nous n’avons plus à faire toute cette conversion manuellement. Jusqu’à présent, ce que nous avons vu est juste à des fins de compréhension. Voyons comment encoder et décoder une chaîne en Base64.
Codage et décodage d’une chaîne en Base64 en JavaScript
En JavaScript, nous avons deux fonctions d’assistance Base64, btoa() et atob(), pour convertir une chaîne en encodage Base64 et vice-versa. Le btoa() prend une chaîne et l’encode en Base64, et atob() prend une chaîne encodée et la décode.
Dans le code ci-dessous, nous avons deux éléments div à l’intérieur desquels nous afficherons la chaîne encodée et décodée. Nous stockons les références de ces deux div dans myDiv_1 et myDiv_2 en utilisant la méthode getElementById() en JavaScript. La chaîne que nous allons encoder et décoder dans cet exemple est Git stocké dans la variable str.
Pour encoder cette chaîne, nous utiliserons la fonction btoa(). Pour cela, il suffit de passer la variable str en paramètre à cette fonction. Nous allons stocker le résultat de ceci dans la variable encodedStr. Ensuite, nous afficherons la valeur de cette variable à l’intérieur du div_1 en utilisant la propriété myDiv_1.innerHTML.
<!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>
Production:
R2l0
C’est ce que vous obtiendrez en sortie. La chaîne n’est pas convertie en Base64.
Maintenant, pour décoder la chaîne ci-dessus dans sa forme d’origine, vous pouvez utiliser la fonction atob() et passer le encodedStr à l’intérieur. Affichez ensuite la valeur de la variable decodedStr à l’intérieur du div_2 en utilisant la propriété myDiv_2.innerHTML.
let decodedStr = atob(encodedStr);
myDiv_2.innerHTML = decodedStr;
Production:
Git
Notez que Base64 est utilisé pour envoyer des données binaires et n’est pas une méthode de cryptage. De plus, ce n’est pas une méthode de compression.
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