Base64 Encoding and Decoding in JavaScript

In this post, we will learn how to encode and decode strings with base64 format in JavaScript. We will also see how to handle Unicode characters with base64 in JavaScript.

Base64 is a method of encoding binary data as ASCII characters, which are composed of 64 symbols: A-Z, a-z, 0-9, + and /. Base64 is commonly used to represent binary data in a way that is compatible with HTML, JavaScript, and CSS, such as embedding images or sending form data. Base64 encoding is a process of converting binary data (such as an image or a file) into a string of ASCII characters. Base64 decoding is the reverse process of base64 encoding. It takes a string of ASCII characters and converts it back to binary data. In this post, we will learn how to use the built-in functions btoa() and atob() in JavaScript to encode and decode strings with base64.

1. How to use `btoa()` and `atob()` functions in JavaScript?

JavaScript provides two built-in functions for encoding and decoding base64 strings: btoa() and atob(). The btoa() function takes a string as an argument and returns a base64 encoded string. The string must consist of characters that can be represented in 8 bits, such as ASCII or UTF-8. If the string contains characters that cannot be represented in 8 bits, such as UTF-16, the function will throw an exception.

The atob() function takes a base64 encoded string as an argument and returns a decoded string. The decoded string consists of characters that represent 8-bit bytes, meaning their values range from 0 to 255. If the encoded string contains characters that are not in the base64 alphabet, such as whitespace or punctuation, the function will throw an exception.

Here is an example of how to use these functions in JavaScript:

var str = "Hello World!";

// Encode the string with btoa()

var encoded = btoa(str);

console.log(encoded); // SGVsbG8gV29ybGQh

// Decode the encoded string with atob()

var decoded = atob(encoded);

console.log(decoded); // Hello World!

2. How to handle unicode characters with Base64 in JavaScript?

As mentioned earlier, the btoa() and atob() functions only work with strings that consist of characters that can be represented in 8 bits. However, some strings may contain Unicode characters that require more than 8 bits to encode, such as emojis or accented letters. In this case, we need to convert the string to an array of bytes before using the btoa() function, and convert the array of bytes back to a string after using the atob() function.

One way to do this conversion is to use the encodeURIComponent() and decodeURIComponent() functions. These functions are used to encode and decode URI components, such as query parameters or fragment identifiers. They also escape any non-ASCII characters by using percent-encoding, which represents each byte as a % followed by two hexadecimal digits. For example, the emoji ???? in UTF-8 is encoded as four bytes: F0 9F 98 8A. Using percent-encoding, this becomes %F0%9F%98%8A.

Here is how we can use these functions to encode and decode Unicode strings with base64 in JavaScript:

var str = "Hello ????";

// Encode the string with encodeURIComponent()

var encoded = encodeURIComponent(str);

// Log the encoded string

console.log(encoded); // Hello%20%F0%9F%98%8A

// Encode the encoded string with btoa()

var base64 = btoa(encoded);

// Log the base64 encoded string

console.log(base64); // SGVsbG8lMjAlRjAlOUYlOTglOEE=

// Decode the base64 encoded string with atob()

var decoded = atob(base64);

// Log the decoded string

console.log(decoded); // Hello%20%F0%9F%98%8A

// Decode the decoded string with decodeURIComponent()

var str = decodeURIComponent(decoded);

// Log the original string

console.log(str); // Hello ????

Base64 Encoding and Decoding in Java

Base64 Encoding and Decoding in JavaScript

1. How to use btoa() and atob() functions in JavaScript?

2. How to handle unicode characters with Base64 in JavaScript?

1. How to use `btoa()` and `atob()` functions in JavaScript?