How To Encode and Decode Strings with Base64 in JavaScript

Introduction

In JavaScript, it is possible to use Base64 to encode and decode strings.

In this article, you will be introduced to the btoa and atob JavaScript functions that are available in modern web browsers.

Prerequisites

To follow along with this article, you will need:

• An understanding of strings in JavaScript. You can consult How To Work with Strings in JavaScript to learn more.
• An understanding of using functions available to the Window or WorkerGlobalScope.
• An understanding of the Developer Console. You can consult How To Use the JavaScript Developer Console to learn more.

Encoding and Decoding Strings with Base64

btoa() and atob() are two Base64 helper functions that are a core part of the HTML specification and available in all modern browsers.

btoa() takes a string and encodes it to Base64.

Let’s say you have a string, "Hello World!", and wish to encode it to Base64. In your browser’s web developer console, define the string, encode it, and display the encoded string:

// Define the string
var decodedStringBtoA = 'Hello World!';

// Encode the String
var encodedStringBtoA = btoa(decodedStringBtoA);

console.log(encodedStringBtoA);

The output of this code is a string of characters with letters and numbers:

Output
SGVsbG8gV29ybGQh

atob() takes a string and decodes it from Base64.

Let’s take the encoded string from earlier, 'SGVsbG8gV29ybGQh', and decode it from Base64. In your browser’s web developer console, define the string, decode it, and display the decoded string:

// Define the string
var encodedStringAtoB = 'SGVsbG8gV29ybGQh';

// Decode the String
var decodedStringAtoB = atob(encodedStringAtoB);

console.log(decodedStringAtoB);

The output of this code reveals the string has been converted back to its original message:

Output
Hello World!

Now, you have two tools for encoding and decoding Base64.

Exploring Common Use Cases for Base64

You can also use Base64 to represent binary data in a way that is compatible with HTML, JavaScript, and CSS. For example, you can embed an image inline in a CSS or JavaScript file using Base64.

It is possible to use Base64 to convert input, like form data or JSON, to a string with a reduced character set that is URL-safe. However, due to how certain servers may interpret plus (+) and forward-slash (/) characters, it is recommended to use encodeURIComponent instead.

Understanding the Limitations of Base64

Base64 is in no way meant to be a secure encryption method.

Base64 is also not a compression method. Encoding a string to Base64 typically results in 33% longer output.

Conclusion

In this article, you were introduced to btoa and atob to encode and decode Base64 strings.

If you’d like to learn more about JavaScript, check out our JavaScript topic page for exercises and programming projects.