Skip to main content

How to Format a Number to 2 Decimal Places in JavaScript

Formatting a number to a specific number of decimal places is a very common requirement, especially when displaying currency, percentages, or measurements. For example, you might need to convert 13.505 to $13.51 or 13.1 to 13.10.

This guide will teach you the modern, standard methods for both formatting a number into a string with a fixed number of decimal places and for mathematically rounding a number to two decimal places.

The Core Goal: Formatting vs. Rounding​

It is critical to understand the difference between these two goals:

  • Formatting: The goal is to create a string representation of a number, padded with zeros to ensure it always has a specific number of decimal places (e.g., 13.1 becomes "13.10"). This is for display purposes.
  • Rounding: The goal is to get a number that has been mathematically rounded to a certain precision (e.g., 6.4567 becomes 6.46). This is for calculations.

The toFixed() method is for formatting, while a mathematical approach is for rounding.

The Number.prototype.toFixed() method is the standard and most direct way to format a number into a string with a specified number of decimal places.

The toFixed() method rounds the number to the given precision and returns a string, padding with zeros if necessary.

For example, we have a number and need to display it as a string with exactly two decimal places. How to format this number to have two decimal places? We can as in the following example:

const num1 = 13.505;
const result1 = num1.toFixed(2);
console.log(result1);        // Output: "13.51"
console.log(typeof result1); // Output: "string"

const num2 = 13.1;
const result2 = num2.toFixed(2);
console.log(result2);        // Output: "13.10"
note

Important: toFixed() returns a string, not a number. This is because numbers themselves cannot have insignificant trailing zeros (e.g., the number 13.1 is the same as 13.10). The string format is necessary to preserve the visual formatting.

Method 2: Mathematically Rounding a Number​

If your goal is not to create a display string but to get a number that has been rounded to two decimal places for further calculations, you should use a mathematical approach.

The logic:

  1. Multiply the number by 100 to shift the decimal point two places to the right.
  2. Use Math.round() to round this to the nearest whole number.
  3. Divide the result by 100 to shift the decimal point back.

For example:

function roundToTwo(num) {
  return Math.round(num * 100) / 100;
}

// Example Usage:
const num = 6.45678;
const rounded = roundToTwo(num);

console.log(rounded);        // Output: 6.46
console.log(typeof rounded); // Output: "number"

// Note that trailing zeros are not preserved in the number type
const num2 = 7.1;
const rounded2 = roundToTwo(num2);
console.log(rounded2);       // Output: 7.1

A Note on Floating-Point Inaccuracy​

JavaScript, like many languages, uses binary floating-point numbers, which cannot represent all decimal fractions with perfect accuracy. This can sometimes lead to surprising rounding behavior with toFixed().

// This is a well-known floating-point issue.
console.log( (0.1 + 0.2) ); // Output: 0.30000000000000004
console.log( (6.005).toFixed(2) ); // Output: "6.00", not "6.01"
note

While this is a rare edge case, it's an important characteristic of floating-point math to be aware of. For high-precision financial calculations, you should use a dedicated decimal math library.

Conclusion: Which Method Should You Use?​

The choice is simple and depends on your goal.

  • If you need to display a number to a user with a fixed number of decimal places (like for currency), you should always use the toFixed() method. This is the correct tool for formatting.
  • If you need to perform a mathematical rounding operation for further calculations and need the result to be a number, you should use the Math.round() method. This is the correct tool for calculation.

Table of Contents