Formating numbers with Javascript

• August 26 2020
• 3 min. read

When working with numbers on Javascript I've most frequently seen toLocaleString as the solution to format numbers.

The following example uses US Dollars as the currency and accounting as the currency sign, it will display negative numbers in parenthesis.

const n1 = 199874;
const n2 = -199874.

console.log(n1.toLocaleString('en-US', {
  style: 'currency',
  currency: 'USD',
  currencySign: 'accounting',
}));

console.log(n2.toLocaleString('en-US', {
  style: 'currency',
  currency: 'USD',
  currencySign: 'accounting',
}));

Sadly if we work with more than a few numbers it gets cumbersome as we have to add the toLocaleString object to the number with all its children.

We may be able to shorten it some if we move the options to an object, and then reference the object wherever we need to format numbers.

const n1 = 199874;
const n2 = -199874;

const enProperties = {
  style: "currency",
  currency: "USD",
  currencySign: "accounting"
};

console.log(n1.toLocaleString("en-US", enProperties));

console.log(n2.toLocaleString("en-US", enProperties));

const usCurrencyFormat = new Intl.NumberFormat('en-US', {
  style: "currency",
  currency: "USD",
  currencySign: "accounting",
});

console.log(usCurrencyFormat.format(12345.6789));
// $12,345.68

console.log(usCurrencyFormat.format(-12345.67891));
// ($12,345.68)

This is awesome but it has its drawbacks. The Intl API is part of the most recent version of ECMAScript (2020) and, as such, browser support is limited; some aspects of the are not supported in Safari.

Fortunately, there are polyfills to cover this until support improves.

Format.js provides a series of libraries to support i18n on your applications. The module we want that we want to work with is @fotmatjs/intl-numberformat/. This will provide support for both number formatting libraries discussed in the post for older browsers.

npm install @formatjs/intl-numberformat

Then we can use either toLocaleString or Int.numberFormat in our code without having to worry about native support.

The codesandbox below is forked and modified from the original by Elijah Manor.

Edit on Github