Format a number to 2 Decimal places in JavaScript

Format a number to 2 Decimal places in JavaScript #

Use the toFixed() method to format a number to 2 decimal places, e.g. num.toFixed(2).

The toFixed method takes a parameter, representing how many digits should appear after the decimal and returns the result.

index.js

Copied!
const num1 = 13.505;
const result1 = num1.toFixed(2);
console.log(result1); // 👉️ 13.51

// ------------------------------------

const num2 = 13.504;
const result2 = num2.toFixed(2);
console.log(result2); // 👉️ 13.50

// ------------------------------------

const str1 = '13.1';
const result3 = parseFloat(str1).toFixed(2);
console.log(result3); // 👉️ 13.10

The Number.toFixed method formats a number to the specified number of decimal places.

The only parameter the toFixed method takes is how many digits should appear after the decimal point.

index.js

Copied!
const num = 3.456789;

console.log(num.toFixed(1)); // 👉️ 3.5
console.log(num.toFixed(2)); // 👉️ 3.46
console.log(num.toFixed(3)); // 👉️ 3.457
console.log(num.toFixed(4)); // 👉️ 3.4568

The toFixed method:

rounds the number if necessary
pads the decimal places with zeros if necessary

Use `parseFloat` to convert a string to a number before calling `toFixed` #

The toFixed method should only be called on a number. If you have a number wrapped in a string, call the parseFloat() function first.

index.js

Copied!
const str1 = '13.1';
const result3 = parseFloat(str1).toFixed(2);
console.log(result3); // 👉️ 13.10

The parseFloat function parses a string to a floating-point number.

index.js

Copied!
console.log(parseFloat('6.178')); // 👉️ 6.178
console.log(typeof parseFloat('6.178')); // 👉️ number

You can define a reusable function that takes care of the conversion and formats the number to 2 decimal places.

index.js

Copied!
function format2Decimals(str) {
  return parseFloat(str).toFixed(2);
}

console.log(format2Decimals('6.45678')); // 👉️ 6.46
console.log(format2Decimals(6)); // 👉️ 6.00
console.log(format2Decimals('6.4')); // 👉️ 6.40
console.log(format2Decimals('6.509')); // 👉️ 6.51

The function takes a number as a parameter and formats the number to 2 decimal places.

Note that floating-point numbers don't represent all decimals precisely in binary, which can lead to inconsistent results.

index.js

Copied!
function format2Decimals(str) {
  return parseFloat(str).toFixed(2);
}

console.log(format2Decimals('6.005')); // 👉️ 6.00
console.log(format2Decimals('14.005')); // 👉️ 14.01

Formatting the number 6.005 to 2 decimal places returns 6.00 whereas 14.01 is returned for 14.005.

This issue is very commonly demonstrated by adding the numbers 0.1 and 0.2.

index.js

Copied!
console.log(0.1 + 0.2 === 0.3); // 👉️ false

The sum of 0.1 and 0.2 is equal to 0.30000000000000004 instead of 0.3.

This is because the binary floating-point format cannot accurately represent numbers like 0.1 or 0.2.

The code gets rounded to the nearest number, resulting in a rounding error.

The `toFixed` method returns a string #

The toFixed method returns a string. If you need the result to be of type number, call the parseFloat() method on the string.

index.js

Copied!
const num = 13.5;
const str = num.toFixed(2);
console.log(typeof str); // 👉️ string

const result = parseFloat(str);
console.log(result); // 👉️ 13.5
console.log(typeof result); // 👉️ number

Note that we don't have a trailing zero after converting the string to a number.

You can't have numbers with trailing zeros in JavaScript.

The language doesn't keep insignificant trailing zeros after converting a string to a number.

index.js

Copied!
console.log(13.5 === 13.500000000); // 👉️ true

console.log(14.4 === 14.400); // 👉️ true

The numbers we compared are equal because the trailing zeros are insignificant.

Format a number to 2 decimal places using `Math.round()` #

To format a number to 2 decimal places:

Multiply the number by 100.
Use the Math.round() function to round the number to the nearest integer.
Divide the number by 100.

index.js

Copied!
function format2Decimals(str) {
  const num = parseFloat(str);

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

console.log(format2Decimals('6.45678')); // 👉️ 6.46
console.log(format2Decimals('7.12345')); // 👉️ 7.12
console.log(format2Decimals('6.000')); // 👉️ 6
console.log(format2Decimals(6)); // 👉️ 6
console.log(format2Decimals('7.1')); // 👉️ 7.1

We first multiply the number by 100 to move the decimal point 2 places to the right.

index.js

Copied!
const num = 6.45678;

console.log(num * 100); // 👉️ 645.678

console.log(Math.round(num * 100)); // 👉️ 646

The Math.round method rounds a number to the nearest integer.

index.js

Copied!
console.log(Math.round(6.45678)); // 👉️ 6
console.log(Math.round(6.55678)); // 👉️ 7

The last step is to divide the result by 100.

index.js

Copied!
const num = 6.45678;

console.log(num * 100); // 👉️ 645.678

console.log(Math.round(num * 100)); // 👉️ 646

console.log(Math.round(num * 100) / 100); // 👉️ 6.46

Dividing the result by 100 formats the number to 2 decimal places.

When using this approach, the function returns a number.

index.js

Copied!
function format2Decimals(str) {
  const num = parseFloat(str);

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

console.log(typeof format2Decimals('6.45678')); // 👉️ number

console.log(format2Decimals('6.45678')); // 👉️ 6.46
console.log(format2Decimals('7.12345')); // 👉️ 7.12

// 🚨 trailing zeros get dropped
console.log(format2Decimals('6.000')); // 👉️ 6
console.log(format2Decimals(6)); // 👉️ 6
console.log(format2Decimals('7.1')); // 👉️ 7.1

Since the function returns a number, all insignificant trailing zeros get dropped.

If you need to keep insignificant trailing zeros around, use the toFixed() method from the previous subheading.

I wrote a book in which I share everything I know about how to become a better, more efficient programmer.

You can use the search field on my Home Page to filter through all of my articles.

Format a number to 2 Decimal places in JavaScript