How to Format a Number with Two Decimals in JavaScript

As a software developer or programmer, you may need to format numbers with a specific number of decimal places in JavaScript.

This is commonly used for financial applications, for example, to represent money in a standard format. ‘

In this tutorial, we will explore the various ways of formatting numbers with two decimal places in JavaScript.

Using the toFixed() Method

The first and easiest method of formatting numbers with two decimal places in JavaScript is by using the toFixed() method.

The toFixed() method takes the number and converts it to a string representation with the specified number of decimal places.

Here’s how it works:

let number = 10.23456;
let result = number.toFixed(2);
console.log(result); 
// Output: 10.23

The toFixed() method rounds the number up or down based on the next digit.

So, if the number is 10.236, it will round it up to 10.24.

Using the Number.prototype.toFixed() Polyfill

If you need to support older browsers that do not support the toFixed() method, you can use a polyfill.

A polyfill is a piece of code that adds support for features that are missing in older browsers.

Here’s how you can use the Number.prototype.toFixed() polyfill to format numbers with two decimal places:

(function() {
  if (!Number.prototype.toFixed) {
    Number.prototype.toFixed = function(digits) {
      var power = Math.pow(10, digits || 0);
      return String(Math.round(this * power) / power);
    };
  }
})();

let number = 10.23456;
let result = number.toFixed(2);
console.log(result); 
// Output: 10.23

Using the Number.prototype.toPrecision() Method

Another way of formatting numbers with two decimal places in JavaScript is by using the toPrecision() method.

The toPrecision() method takes the number and returns a string representation of the number with the specified number of significant digits.

Here’s how it works:

let number = 10.23456;
let result = number.toPrecision(4);
console.log(result); 
// Output: 10.23

Using the String.prototype.slice() Method

You can also format numbers with two decimal places in JavaScript by using the slice() method of the String object.

The slice() method takes the string and returns a part of it as a new string.

Here’s how it works:

let number = 10.23456;
let result = (Math.round(number * 100) / 100).toFixed(2);
console.log(result); 
// Output: 10.23

Using the Intl.NumberFormat() Method

The Intl.NumberFormat() method is a more advanced method of formatting numbers in JavaScript.

It allows you to specify the number format, including the number of decimal places.

Here’s how it works:

let number = 10.23456;
let result = new Intl.NumberFormat('en-US', { style: 'decimal', minimumFractionDigits: 2, maximumFractionDigits: 2 }).format(number);
console.</code>
log(result);
// Output: 10.23

In this example, we’re using the Intl.NumberFormat() method to format a number in the US locale with two decimal places, specified by the minimumFractionDigits and maximumFractionDigits options.

Conclusion

In conclusion, there are several methods of formatting numbers with two decimal places in JavaScript, each with its own advantages and limitations.

The toFixed() method is the simplest and most widely used, while the Intl.NumberFormat() method is more advanced and provides more control over the number format.

Regardless of the method you choose, it’s important to understand the requirements of your application and choose the method that best meets those requirements.