How to convert Binary to Decimal in JavaScript?

HTMLJavascriptProgramming Scripts

In this tutorial, we will learn to convert the binary to decimal in JavaScript. The Binary number is used in digital electronics. It is a string of ‘0’ and ‘1’, representing the number with respect to base 2.

Here are the different methods below to convert the binary number to decimal.

Using the parseInt() Method

In JavaScript, parseInt() method is useful to extract the number from the string. We can define the base for the number as a parameter in the parseInt() method.

Syntax

Users can follow the below syntax to use the parseInt() method to convert the binary to decimal.

let binary = "0101";
let output = parseInt(binary, base);

Parameters

  • binary − It is a string of the binary number.

  • base − It is the base for the binary string. In our case, we will pass base ‘2’, so it extracts the binary number from the string and converts it into a decimal.

Example

In the below example, we have used the parseInt() method. We have passed the binary string and base two as the parameters of the parseInt() method. We have evaluated our methods for the different binary strings. Users can see the output in which we have rendered the decimal of the binary string.

<html> <head> <title>Convert Binary to decimal in JavaScript.</title> </head> <body> <h2>Convert Binary to decimal using <i> parseInt() </i> method.</h2> <h4>The decimal of 0101 is.</h4> <div id = "decimal1"> </div> <h4>The decimal of 1100011110001 is.</h4> <div id = "decimal2"> </div> <script> let decimal1 = document.getElementById("decimal1"); let decimal2 = document.getElementById("decimal2"); let binary = "0101"; decimal1.innerHTML = parseInt(binary, 2); // we have given based to extract the binary and convert it into the integer binary = "1100011110001"; decimal2.innerHTML = parseInt(binary, 2); </script> </body> </html>

Create a Custom Function to convert Binary to Decimal

In this section, we will create the custom function to convert the binary number to decimal. We will use the Math.pow() function. Generally, a binary number is represented as the power of 2s.

Let’s understand it by the below example. ‘110’ is the binary string, which we can represent in the decimal as below.

'110' = 1*22 + 1*21 + 0*20 = 6 (In decimal)

So, users have seen how we can convert binary to decimal, and we will apply thing method in our code.

Syntax

let decimal = 0;
let l = binary.length;
for (let i = l - 1; i >= 0; i--) {
   if ( binary[i] == '1' )
   decimal += Math.pow( number ,power );// add power of 2 in the decimal if character of binary string is 1.
}

Parameters

The math.pow() function takes two parameters.

  • number − It is a number for which users want to calculate the power. In our case, it is fixed which is 2.

  • power − It is the power of the first parameter. We will pass different values using for loop to get different powers of 2.

Example

In this example, we have created the function to convert binary to decimal. Inside the function, we are iterating through every character of the binary string from last.

If we get ‘1’ in the binary string, we add the power of 2 according to the character position using Math.pow() function in the decimal variable. We are not storing any value when we get ‘0’ in the binary string because, when we multiply the power of 2 with 0, it returns zero.

<html> <head> <title>Convert Binary to decimal in JavaScript.</title> </head> <body> <h2>Convert Binary to decimal in JavaScript using the <i> Math.pow() </i> method.</h2> <h4>The decimal of 101000 is.</h4> <div id = "decimal1"></div> <h4>The decimal of 11101010101 is.</h4> <div id = "decimal2"></div> <script> let decimal1 = document.getElementById("decimal1"); let decimal2 = document.getElementById("decimal2"); function DecimalToBinary( binary ) { let decimal = 0; let l = binary.length; for (let i = l - 1; i >= 0; i--) { if ( binary[i] == '1' ) decimal += Math.pow( 2, l - 1 - i ); } return decimal; } decimal1.innerHTML = DecimalToBinary( "101000" ); decimal2.innerHTML = DecimalToBinary( "11101010101" ); </script> </body> </html>

In this tutorial, we have used the parseInt() method to convert the binary to decimal. Also, we have created a custom function. Users can choose either way according to their better understanding.

However, the second method has more time complexity. So, it is better to use the first method.

raja
Updated on 08-Aug-2022 09:12:08

Advertisements