Format a number to 2 Decimal places in JavaScript

avatar

Borislav Hadzhiev

3 min

banner

Photo from Unsplash

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
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
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
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
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
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
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
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
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
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:

  1. Multiply the number by 100.
  2. Use the Math.round() function to round the number to the nearest integer.
  3. Divide the number by 100.
index.js
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
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
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
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
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.
book cover
You can use the search field on my Home Page to filter through all of my articles.

Copyright ยฉ 2023 Borislav Hadzhiev