javascript base64 decode

How to Encode and Decode with Base64 in JavaScript?

by

How to encode and decode strings using Base64 in JavaScript?

This article introduces the btoa and atob functions available in modern web browsers and provides examples of how to use them to encode and decode strings.

Are you ready to discover the power of Base64 encoding and decoding in JavaScript? So continue reading.

What is Base64 in JavaScript?

Base64 is a way to encode binary data into text so that it can be easily transmitted and stored.

In addition to that, the base64 encoding is a technique that takes binary data and translates it into a set of 64 characters.

These characters come from the familiar ASCII character set and include uppercase letters from A to Z, lowercase letters from a to z, numbers from 0 to 9, and two special symbols: plus (+) and forward slash (/).

In JavaScript, there are two built-in functions that can be used to encode and decode Base64 strings: btoa and atob.

The btoa function takes a string of binary data and converts it into a Base64-encoded ASCII string.

The atob function does the opposite, taking a Base64-encoded string and converting it back into binary data.

These functions make it easy to work with Base64-encoded data in JavaScript.

How to Encode and Decode Strings in JavaScript with Base64

To encode and decode strings in JavaScript. We can utilize the btoa() function to encode a string to base64 and atob() functions to decode a string to base64.

These functions are accessible in contemporary web browsers.

Here’s an example code where we can able to see how we can encode a string by using the btoa() function:

let sampleString = "Itsourcecode";
let encodedValue = btoa(sampleString); ✅
console.log(encodedValue);

Output:

SXRzb3VyY2Vjb2Rl

You can easily decode a string in JavaScript with base64 using built-in functions like atob(), which lets you decode data that has been encoded using base64.

When you use the atob() function, all you need to do is provide it with a base64-encoded string, and it will give you back the decoded binary data in the form of a regular string.

It’s a pretty convenient way to work with Base64 data in JavaScript!

Here’s an example of decoding base64 strings with JavaScript’s atob() function.

Consider the previously provided encoded string, “SXRzb3VyY2Vjb2Rl.” Let’s proceed to decode it using the Base64 method.

var encodedString = "SXRzb3VyY2Vjb2Rl";
var decodedString = atob(encodedString); ✅
console.log(decodedString);

Output: 

Itsourcecode

It’s important to note that the btoa() function only works with 8-bit characters. If the string contains characters that can’t be represented in 8 bits (UTF-16), the function will break.

In this case, you need to escape the string to an array of 8-bit bytes before using the btoa() function.

Conclusion

In conclusion, this article introduces the concept of Base64 encoding and decoding in JavaScript.

Base64 is a method to convert binary data into text, making it easier to transmit and store.

JavaScript provides two built-in functions, btoa() and atob(), for encoding and decoding Base64 strings.

The btoa() function encodes binary data into a Base64-encoded ASCII string, while the atob() function decodes a Base64-encoded string back into binary data.

We are hoping that this article provides you with enough information that helps you understand the JavaScript base64 decode.

If you want to dive into more JavaScript topics, check out the following articles:

Thank you for reading itsourcecoders 😊.

Leave a Comment