Base64 encoding is an interesting way of representing information which is used to transform binary data into a string consisting of alphabets, digits and some special characters.
Base64 is typically used to encode data that may be corrupted during transfer. Before eight bit bytes became a standard many systems such as SMTP (Email) used seven, six and even three bit bytes which led to data being lost during transfer between systems. So a new encoding scheme was developed which represented binary data in the form of text strings which could easily be transferred between systems without any damage to the data.
Base64 is commonly used to encode the binary data of email attachments such as images and documents. It is also used to encode the images and audio files embedded in a webpage.
Base64 was also invented to reduce the expenses of data transfer between systems. In Base64 each character replaces six digits of binary which makes it a more efficient way of data transfer and reduces its cost.
01101011 00000001 01001010 10101001 01010101 01001010 10101111 11000011 00110110 10110101 01010101 01010010 01101010 01101101 01101100 10101010 10101010 10110010 11011011 01011011 00101011 00101100 11001010 10110101 01010101 01010100 10010110 01010101 10111010 10101101 01011010 10101011 10101011 10011010 10101010 00000000 01101011 00000001 01001010 10101001 01010101 01001010 10101111 11000011 00110110 10110101 01010101 01010010 01101010 10101010 00000000 10101010 10101010 10110010 00000001 01011011 00101011 00101100 11001010 10110101 01010101 01010100 10010110 01010101 10111010 10101101 01011010 10101011 10101011 10011010 10101010 00000000 10101010 10101010 10110010 11000011 00110110
For example, the binary data given above can be reduced to this short string using Base64 encoding:
awFKqVVKr8M2tVVSam1sqqqy21srLMq1VVSWVbqtWqurmqoAawFKqVVKr8M2tVVSaqoAqqqyAVsrLMq1VVSWVbqtWqurmqoAqqqywzY=
How to encode and decode a string using Base64 in JavaScript
There are two different functions available in JavaScript named btoa and atob which enable programmers to encode or decode a string; These functions are supported by almost all major web browsers. In this article we will extensively discuss both btoa and atob functions; but first let’s discuss the btoa function:
How to encode a string using Base64 in JavaScript
JavaScript has a built-in function named btoa which can be used to encode a string into a Base64 string:
var originalStr = “Welcome to Linux Hint!”;
encodedStr = btoa(originalStr);
console.log(encodedStr);
<img data-lazy- data-lazy-src="https://kirelos.com/wp-content/uploads/2021/09/echo/word-image-240.png" data-lazy- height="57" src="data:image/svg xml,” width=”692″>
How to decode a Base64 string in JavaScript
JavaScript provides the atob function to decode a Base64 string into a normal string:
var originalStr = “Welcome to Linux Hint!”;
encodedStr = btoa(originalStr);
console.log(encodedStr);
decodedStr = atob(encodedStr);
console.log(decodedStr);
<img data-lazy- data-lazy-src="https://kirelos.com/wp-content/uploads/2021/09/echo/word-image-242.png" data-lazy- height="81" src="data:image/svg xml,” width=”691″>
Conclusion
Base64 is a data representation format which converts binary data into a special string of characters, digits and special characters; each character in Base64 string replaces 6 binary digits. Base64 does not conceal data, it only transforms it from one format to another for easier transfer between different systems. The Base64 encoded string should be treated as plain text; it does not protect data from the man in the middle attacks. In this post we learned to encode and decode strings using Base64 in JavaScript.
About the author
<img data-del="avatar" data-lazy-src="https://kirelos.com/wp-content/uploads/2021/09/echo/7011409B3A384F43A8417D1DAC68D179-150×150.jpg613d08c7b7ff9.jpg" height="112" src="data:image/svg xml,” width=”112″>
Shehroz Azam
A Javascript Developer & Linux enthusiast with 4 years of industrial experience and proven know-how to combine creative and usability viewpoints resulting in world-class web applications. I have experience working with Vue, React & Node.js & currently working on article writing and video creation.
