Common number manipulation tasks and how to solve them.

Format as Currency

Say you have a number like 10, and it represents the price of something. You want to transform it to $10.00.

If the number has more than 3 digits however it should be displayed differently, for example 1000 should be displayed as $1,000.00.

Different countries have different conventions to display values.

JavaScript makes it very easy with the ECMAScript Internationalization API:

const formatter = new Intl.NumberFormat('en-US', {
  style: 'currency',
  currency: 'USD',
  minimumFractionDigits: 2
})

formatter.format(1000) // "$1,000.00"
formatter.format(10) // "$10.00"
formatter.format(123233000) // "$123,233,000.00"

The minimumFractionDigits property sets the fraction part to be always at least 2 digits.

This example creates a number formatter for the Euro currency, for the Italian country:

const formatter = new Intl.NumberFormat('it-IT', {
  style: 'currency',
  currency: 'EUR'
})

Fix Decimal Arithmetic

If you try to do the sum of two decimal numbers in JavaScript you might have a surprise.

0.1 + 0.1 is, as you expect, 0.2.

But sometimes you have some unexpected result.

Like for 0.1 + 0.2. The result is not 0.3 as you’d expect, but it’s 0.30000000000000004.

Or 1.4 - 1, the result is 0.3999999999999999.

The reason is due to the fact computers store data as binary, 0 or 1. Not every decimal number can be represented perfectly in this binary format, because some numbers are repeating numbers in binary.

You can use libraries like decimal.js, bignumber.js or big.js.

You can also use a “trick” like this. You decide to cut decimals after 2 positions, for example, and multiply the number by 100 to remove the decimal part. Then you divide by 100 after you’ve done the sum:

0.1 + 0.2 //0.30000000000000004

(0.1.toFixed(2) * 100 + 0.2.toFixed(2) * 100) / 100 //0.3

Use 10000 instead of 100 to keep 4 decimal positions.

More abstracted:

const sum = (a, b, positions) => {
  const factor = Math.pow(10, positions)
  return (a.toFixed(positions) * factor + b.toFixed(positions) * factor) / factor
}

sum(0.1, 0.2, 4) //0.3

Handle Comma/Dot Decimal Separators

Different countries use different ways to separate the integral part from the decimal part of a number:

0,32  // comma (many European countries)
0.32  // dot (US, UK, etc.)

To convert a string with commas to using dots:

let value = '0,32'
value = value.replace(/,/g, '.') 
//value is now '0.32'

You can do the opposite using replace(/\./g, ',') (note the \ before the . to escape it, since it’s a special character in regular expressions).

The g flag in the regex makes sure that if there are multiple instances of a comma (or dot, in the second example) they are all converted.

After doing this substitution you can call parseFloat(value) to get the float from the string, and then limit the decimals number to 2 using toFixed(2):

value = parseFloat(value).toFixed(2)

Lessons in this unit:

0:	Introduction
1:	Number Basics
2:	Number Validation
3:	Parsing Numbers
4:	Formatting Numbers
5:	▶︎ Number Recipes
6:	The Binary Number System
7:	Underscores in numbers
8:	The Decimal Number System
9:	Converting Numbers from Decimal to Binary