Tutorial

How To Encode and Decode Strings with Base64 in JavaScript

Updated on December 6, 2021
Default avatar

By Nicholas Cerminara

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.

Deploy your frontend applications from GitHub using DigitalOcean App Platform. Let DigitalOcean focus on scaling your app.

Prerequisites

To follow along with this article, you will need:

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.

Note: The naming of these functions reference old Unix commands for converting binary to ASCII (btoa) and ASCII to binary (atob). However, “both the input and output of these functions are Unicode strings”.

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:

  1. 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:

  1. 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.

Note: Can I Use documents the known issue for handling UTF-8 and provides a polyfill for older browsers.

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

Want to deploy your application quickly? Try Cloudways, the #1 managed hosting provider for small-to-medium businesses, agencies, and developers - for free. DigitalOcean and Cloudways together will give you a reliable, scalable, and hassle-free managed hosting experience with anytime support that makes all your hosting worries a thing of the past. Start with $100 in free credits!

Learn more here


About the authors
Default avatar
Nicholas Cerminara

author



Still looking for an answer?

Ask a questionSearch for more help

Was this helpful?
 
3 Comments


This textbox defaults to using Markdown to format your answer.

You can type !ref in this text area to quickly search our full set of tutorials, documentation & marketplace offerings and insert the link!

These functions are depreciated.

This comment has been deleted

    doesn’t work for unicode

    Try DigitalOcean for free

    Click below to sign up and get $200 of credit to try our products over 60 days!

    Sign up

    Join the Tech Talk
    Success! Thank you! Please check your email for further details.

    Please complete your information!

    Get our biweekly newsletter

    Sign up for Infrastructure as a Newsletter.

    Hollie's Hub for Good

    Working on improving health and education, reducing inequality, and spurring economic growth? We'd like to help.

    Become a contributor

    Get paid to write technical tutorials and select a tech-focused charity to receive a matching donation.

    Welcome to the developer cloud

    DigitalOcean makes it simple to launch in the cloud and scale up as you grow — whether you're running one virtual machine or ten thousand.

    Learn more
    DigitalOcean Cloud Control Panel