Base64 encoding and decoding are commonly used for handling binary data in textual formats. For instance, Base64 is used to encode images, files, or other binary content into a text-based format that can be easily transmitted or stored. In JavaScript, decoding Base64-encoded data is simple and can be done using built-in functions.
What Is Base64?
Base64 is an encoding scheme that converts binary data into a text representation, using 64 printable ASCII characters. This makes it suitable for transmitting binary data over text-based protocols such as HTTP or email.
For example:
- Original text:
Hello, World! - Base64 encoded:
SGVsbG8sIFdvcmxkIQ==
Decoding Base64 converts the encoded string back to its original form.
Decoding Base64 in JavaScript
In JavaScript, you can decode Base64 using the atob() function, which is a built-in method in modern browsers. Additionally, for Node.js environments, you can use the Buffer class.
1. Decoding Base64 in Browsers
The atob() function decodes a Base64-encoded string into its original text format.
Here’s how to use it:
// Base64-encoded string
const encodedString = "SGVsbG8sIFdvcmxkIQ==";
// Decoding the Base64 string
const decodedString = atob(encodedString);
console.log(decodedString); // Output: Hello, World!
2. Decoding Base64 in Node.js
In Node.js, you use the Buffer class for encoding and decoding Base64.
Example:
// Base64-encoded string
const encodedString = "SGVsbG8sIFdvcmxkIQ==";
// Decoding the Base64 string
const buffer = Buffer.from(encodedString, "base64");
const decodedString = buffer.toString("utf-8");
console.log(decodedString); // Output: Hello, World!
Handling Unicode Characters
The atob() function only works for ASCII characters and may fail for Unicode strings. To properly handle Unicode, you can use the following workaround:
// Base64-encoded string (Unicode-safe)
const encodedString = "4pyTIMOgIGxvdmUgdHdlZQ==";
// Decoding Base64 with Unicode support
const decodedString = decodeURIComponent(
Array.prototype.map
.call(atob(encodedString), (char) => "%" + char.charCodeAt(0).toString(16).padStart(2, "0"))
.join("")
);
console.log(decodedString); // Output: 🥰 love twee
For Node.js, the Buffer approach works seamlessly with Unicode, so no additional steps are required.
Example: Decoding and Using Base64
Here’s an example of decoding Base64 to display an image in a browser:
// Base64-encoded image (truncated for brevity)
const encodedImage = "data:image/png;base64,iVBORw0KGgoAAAANS...";
// Create an image element
const img = document.createElement("img");
img.src = encodedImage;
// Append the image to the document
document.body.appendChild(img);
This approach is commonly used to embed images directly into HTML or JavaScript.
Decoding Base64 in JavaScript is straightforward, whether you’re working in a browser or Node.js environment. Use the atob() function in browsers for basic decoding, and the Buffer class in Node.js for more robust handling. For Unicode strings, take care to implement additional decoding steps when using atob(). With these tools, you can easily work with Base64-encoded data in your JavaScript applications.