How To Convert Numbers To Hexadecimal In JavaScript

The built-in Number type comes with a method to help you convert numbers to hexadecimal in JavaScript. Learn more about it with the explanation and examples below.

Convert Numbers To Hexadecimal In JavaScript

Object.toString()

You can use the toString() method to convert a decimal number to hexadecimal. This is the main purpose of this method. But it is officially supported, meaning you don’t need to carry out a manual conversion.

The syntax is quite straightforward:

yourObj.toString()

You don’t need any arguments by default. The statement above will simply return the string representation of the Object instance (one of JavaScript’s built-in data types). This has no use for us in this situation.

For instance, this is how the toString() method is invoked most of the time:

const num = 128;
console.log(num.toString());

Output:

128

Number.toString()

The example above just gives us the string with the exact representation of the original number. Luckily, if you invoke the toString() method on objects inheriting from the Object type, such as Number, you can use optional parameters to change the base of the numeral system.

In particular, if you already have a Number object, you can use the radix parameter to specify the base used for the string representation.

yourNumber.toString(radix)

Since we want the hexadecimal representation, the radix parameter should be 16.

var num = 128;
console.log(num.toString(16))
num = 16559;
console.log(num.toString(16))

Output:

80
40af

As you can see, the JavaScript runtime prints out ’80’ and ’40af’, which are hex values of decimal numbers 128 and 16559.

The above statements force JavaScript to override the Object.toString() method and use Number.toString() instead. It parses ’16’ as its argument and becomes aware of your intention to get the hexadecimal representation of your original number. Remember that if you omit the radix parameter, JavaScript will assume it to be 10.

This conversion applies to negative decimal values as well:

const num = -16559;
console.log(num.toString(16))

Output:

-40af

If you prefer to have the letter from a to f in the hex representation in upper case, you can use the toUpperCase() method to convert it:

const num = 16559;
console.log(num.toString(16).toUpperCase())

Output:

40AF

Additionally, this conversion is applicable to not just integers but also floating-point numbers.

const num = 10.5;
console.log(num.toString(16).toUpperCase())

Output:

A.8

The issue gets a little more complicated if your original number doesn’t have a base of 10. In this case, you will need to use the toString() method in conjunction with the parseInt() function to make the conversion to hexadecimal.

For instance, you can use the following code to convert 1372 in octal to hexadecimal:

const oct = “1372”;
const dec = parseInt(oct, 8);
console.log(dec);
const hex = dec.toString(16);
console.log(hex);

Output:

762
2fa

JavaScript doesn’t support a direct conversion from octal to hexadecimal. That is why we need to convert the octal value to decimal first. The parseInt() can come in handy here with this syntax:

parseInt(string, radix)

The above statement will take the string parameter and return an integer using the base you have specified with the rapid parameter (between 2 and 36). In the above example, the 1372 number in octal has been converted to 762 in decimal before going through another conversion to hexadecimal (2fa).

Summary

To convert numbers to hexadecimal in JavaScript, you can use the toString() method of Number objects with the radix parameter. The conversion is simple with decimal values. If you have binary or octal numbers, for instance, you will need to use the parseInt() function to convert them to decimal first.

If you want to check whether your string represents a valid number before making the conversion, you can follow the suggestions in this guide.

Reference Sources:

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/toString

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number/toString#converting_radix_of_number_strings

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/parseInt