ASCII to hex and hex to ASCII converter class in JavaScript

In this tutorial, we'll create a JavaScript class that converts between ASCII and hexadecimal formats. This is useful for encoding text data, debugging, or working with binary protocols.

Problem Statement

We need to write a JavaScript class with two member functions:

• toHex: Takes an ASCII string and returns its hexadecimal equivalent
• toASCII: Takes a hexadecimal string and returns its ASCII equivalent

For example, the string 'this is a string' should convert to hex '74686973206973206120737472696e67' and back to the original ASCII.

How It Works

ASCII to hex conversion uses charCodeAt() to get character codes, then toString(16) to convert to hexadecimal. Hex to ASCII reverses this process using parseInt() and String.fromCharCode().

Implementation

const str = 'this is a string';

class Converter {
   toASCII = (hex = '') => {
      const res = [];
      for(let i = 0; i < hex.length; i += 2) {
         res.push(hex.slice(i, i + 2));
      }
      return res
         .map(el => String.fromCharCode(parseInt(el, 16)))
         .join('');
   };
   
   toHex = (ascii = '') => {
      return ascii
         .split('')
         .map(el => el.charCodeAt().toString(16))
         .join('');
   };
}

const converter = new Converter();
const hex = converter.toHex(str);
console.log('ASCII to Hex:', hex);
console.log('Hex to ASCII:', converter.toASCII(hex));

ASCII to Hex: 74686973206973206120737472696e67
Hex to ASCII: this is a string

Step-by-Step Breakdown

toHex() method:

• Split the string into individual characters
• Get ASCII code using charCodeAt()
• Convert to hexadecimal using toString(16)
• Join all hex values into a single string

toASCII() method:

• Split hex string into pairs (each representing one character)
• Convert each pair from hex to decimal using parseInt(hex, 16)
• Convert decimal to character using String.fromCharCode()
• Join characters back into the original string

Example with Different Inputs

const converter = new Converter();

// Test with numbers and symbols
const text = 'Hello World! 123';
const hexResult = converter.toHex(text);
const backToText = converter.toASCII(hexResult);

console.log('Original:', text);
console.log('Hex:', hexResult);
console.log('Back to ASCII:', backToText);
console.log('Match:', text === backToText);

Original: Hello World! 123
Hex: 48656c6c6f20576f726c64212031323
Back to ASCII: Hello World! 123
Match: true

Conclusion

This Converter class provides a simple way to convert between ASCII and hexadecimal formats. The methods work by leveraging JavaScript's built-in character code functions to transform text into hex representation and back.