3 Easy Ways to Format the Number to 2 Decimals in JavaScript

JavaScript Format Number 2 Decimals

When we perform any JavaScript operation with numbers, its output may come as a large float value i.e. decimal values. If there are more than 2 decimal numbers after the point in the float values, we can format them as 2 decimals to easily read and interpret. In many situations we need to format the float number to 2 decimals places in Javascript Let’s see some example:

let a=100/6;
document.write(a)

javascript format number 2 decimals

In this above code, we perform the operation of dividing 100 by 6, so its output comes in float values. Note : There are more than 2 decimal numbers after the decimal point. So, we have to format the the float number into 2 decimal.

Why we need to format number 2 decimals?

  • Displaying currency values: Currency values are typically represented to two decimal places, so we must display currency values with two decimal places. For example, If you are creating a US dollar to Indian rupees currency converter program, you must format the Indian rupees exactly to 2 decimal places. 81.8075 Indian Rupees is equal to 1 US dollar, so here we have to format the currency as ‘81.80‘ to 2 decimal places.
  • Reduce clutter: If we have large numbers with many decimal places, it can make difficult to read and interpret. So, if we formatted into 2 decimal places, it can help reduce clutter and make it easier to read and interpret. For example, We have a float number like ‘16.666666666666668‘, we need to format it as ‘16.66′ to reduce clutter.
  • Accuracy: Sometimes, when performing calculations with decimal numbers, rounding errors can occur, which can cause inaccuracies in the results. In that situation, we can the provide more accurate results by formatting a number to two decimal places.

How works 2 decimal places formatting numbers?

  • If the digit in the third decimal place is 5 or greater, we need to add 1 to the second decimal place
  • If the digit in the third decimal place is less than 5, we can leave the second decimal place unchanged.
READ ALSO  How to Use Javascript Prompt for Input | Full Guide

For example, when formatting the number ‘3.1467‘. We first look at the third decimal place, which is 6. Since 6 is greater than 5, we round up, resulting in the number 3.15.

3 Ways to format number to two decimals

Are you struggling to format a number to 2 decimal place, to do that follow the steps given below:

1. Math.round()

In this way, we use the Math.round() method along with the toFixed() method. The Math.round() method is used to round a number to the nearest integer. And the toFixed() method to format a number to two decimal places.

let a=100/6;
let num = a;
let formattedNum = (Math.round(num * 100) / 100).toFixed(2);

document.write("Unformatted Num: " + a +"<br/>")
document.write("Formatted Num: " + formattedNum);

Steps:

  1. In this above code, we have created variable ‘a’ and assigned to assigns it the value of 100/6, which is approximately 16.6666667.
  2. Then we create a new variable ‘num’ and assigns it the value of a, which is 16.6666667.
  3. Finally, we have created the new variable called ‘formattedNum’, it have series of operations. Let’s break it down:

‘(Math.round(num * 100)’ – To multiplies the value of variable ‘num’ by 100 and then rounds it to the nearest integer. In this case, that would be 1667.

‘/ 100’ – To divides the result of the previous step by 100. This gives us 16.67.

‘.toFixed(2)‘ – To converts the number to a string and pads it with zeroes to ensure that it has two decimal places. So the final result of the variable ‘formattedNum’ is ‘16.67’

2. toFixed() Method

The toFixed() method is used to format numbers to a specified number of decimal places. We can give a single argument to this method, which specifies the number of decimal places, So in this case we have to give ‘2’.

let pi = 3.14159;
let formattedpi = pi.toFixed(2);
console.log(formattedpi); // Output: 3.14

Steps:

  1. In this code, we have assigned the variable ‘pi‘ to ‘3.14159’, which is value of pi.
  2. To formatted the variable ‘pi’ into two decimal places, we need to use ‘toFixed()’ method. So, we create the variable ‘formattedpi‘ to store the formatted value. And assigned ‘pi.toFixed(2)‘, it specifies that the ‘pi’ variable should be formatted to have two digits after the decimal point.
  3. Finally, the ‘formattedpi’ variable contains the ‘3.14’.
READ ALSO  What is Constructor Function in Javascript | Full Guide

3. Using Number() method

This way is similar to ‘toFixed()’ method. We can also use the Javascript Number() method to format numbers to two decimal places. This method takes a single argument, which is the number to be formatted.

let dollar = 81.8075;
let formattedDollar = Number(dollar.toFixed(2));
console.log(formattedDollar);

// Output: 81.81

Steps:

  1. In this example, we have created varaible called ‘dollar’ and assigned an Indian Rupee value of 81.8075 dollars to the ‘Dollar’ variable.
  2. Then we create the variable ‘formattedDollar’ and assigned to ‘Number(dollar.toFixed(2))‘ .
  3. Number() – This function converts the given value into a number.
  4. dollar.toFixed(2) – it formats the variable ‘dollar’ to 2 decimal places and returns it as a string
  5. Finally, we logged the variable ‘formattedDollar’ and it contains the formatted value ‘81.81’

Conclusion

In this article, we explored three different methods to format numbers in JavaScript to two decimal places. You can choose which methods to use depending on your specific use case and personal preference. By mastering these methods, you will be well-equipped to handle any formatting task involving numerical data in your JavaScript projects.

Leave a Reply