Convert Decimal to Hex in JavaScript

For any computer programmer who is working with low-level language or assembly language, it is a fundamental task to convert decimal to hex or hexadecimal. In web development we use colors and to represent them it is a common practice to use hex color codes. In Javascript, it is very easy to convert decimal to hexadecimal because of the built-in functions and methods provided by ECMA. In this article, we will discuss multiple ways to convert decimal to hex in javascript with appropriate examples.

  • Using toString() method

  • Using Custom Function

Using the toString() Method

As the name suggests the toString() method is used to convert a number into a string, every object in javascript has the toString() method. This method takes radix as a parameter (Optional).

Syntax

Number.toString( Radix )

Here the radix is under 2 to 36. Where Base 2 is for Binary, 8 for Octal, and 16 for Hexadecimal.

Return Value

This method returns the String as a number of provided radix values.

To convert decimal to Hex we need the following steps ?

  • Apply the toString() method to the number.

  • Pass 16 as the argument of the toString method.

Example

In this example, we are converting Decimal to Hex using the toString method.

Open Compiler
<html>
<body>
   <h2>Convert decimal to hex using toString() method</h2>
   <p id="input"> Decimal: </p>
   <p id="output"> Hex: </p>
   <script>
      let num = 146541;
      document.getElementById("input").innerText += num;
      let hex = "";
      hex = num.toString(16).toUpperCase();      
      // Print the values
      document.getElementById("output").innerText += hex ;
   </script>
</body>
</html>

Using Custom Logic

Although javascript provides built-in methods to convert decimal to hex, we can also implement our custom logic to convert decimal to hex. Here are the steps given below.

  • Create a variable that contains all hex characters which is "0123456789ABCDEF"

  • Run a loop until the decimal number is greater than 0.

  • At each iteration get the remainder of the decimal number by dividing it by 16.

  • And get the character of the remiander'th position of the hex character and this is how you get the appropriate hex characters.

  • Concatenate all those hex characters.

  • And finally, divide the decimal number by 16 at each iteration.

Example

In this example, we are converting decimal to hex by making a custom function.

Open Compiler
<html>
<body>
   <h2>Convert decimal to hex using custom logic</h2>
   <p id="input"> Decimal: </p>
   <p id="output"> Hex: </p>
   <script>
      // Define the decimal number to be converted
      let num = 116565;
      document.getElementById("input").innerText += num;
      
      // Define the hexadecimal characters used for mapping
      let hexChars = "0123456789ABCDEF";
      
      // Define variables for the result and the original number
      let result = "";
      let temp = num;
      
      // Convert the decimal number to a hexadecimal string
      while (num > 0) {
         let remainder = num % 16;
         result = hexChars[remainder] + result;
         num = Math.floor(num / 16);
      }
      document.getElementById("output").innerText += result ;
   </script>
</body>
</html>
Updated on: 2023-04-21T16:59:14+05:30

1K+ Views

Kickstart Your Career

Get certified by completing the course

Get Started
Advertisements