[Javascript] Number, toLocaleString() & Intl

When needing to format a number I've tended to lean towards Number.prototype.toFixed(), reach for a 3rd party library, or write custom functions. However, with modern browsers, there's a lot of really interesting native capabilities you could start using with Number.prototype.toLocaleString()or Intl.NumberFormat.

 

import "@formatjs/intl-numberformat/polyfill";
import "@formatjs/intl-numberformat/locale-data/en.js";

let number = 12345.6789;

// Locale
console.log(number.toLocaleString()); // 12,345.679 
console.log(number.toLocaleString("en-US")); // 12,345.679 
console.log(number.toLocaleString("de-DE")); // 12.345,679 

// Currency
console.log(
  number.toLocaleString("en-US", {
    style: "currency",
    currency: "USD"
  })
); // $12,345.68 
console.log(
  number.toLocaleString("de-DE", {
    style: "currency",
    currency: "EUR"
  })
); // 12.345,68 € 
console.log(
  number.toLocaleString("ja-JP", {
    style: "currency",
    currency: "JPY"
  })
); // ￥12,346 

// Significant Digits
console.log(
  number.toLocaleString("en-US", {
    maximumSignificantDigits: 1
  })
); // 10,000 
console.log(
  number.toLocaleString("fr-FR", {
    maximumSignificantDigits: 3
  })
); // 12 300 

// Unit Support
console.log(
  number.toLocaleString("en-US", {
    style: "unit",
    unit: "mile-per-hour"
  })
); // 12,345.679 mph 
console.log(
  number.toLocaleString("fr-FR", {
    style: "unit",
    unit: "liter",
    unitDisplay: "long"
  })
); // 12 345,679 litres 

// Compact Notation
console.log(
  number.toLocaleString("en-US", {
    notation: "compact",
    compactDisplay: "long"
  })
); // 12 thousand 

// Percents
number = 0.1234;
console.log(
  number.toLocaleString("en-US", {
    style: "percent",
    minimumFractionDigits: 2
  })
); // 12.34%

// Accounting
number = -123.456;
console.log(
  number.toLocaleString("en-US", {
    style: "currency",
    currency: "USD",
    currencySign: "accounting",
    signDisplay: "always"
  })
); // ($123.46) 

// Intl.NumberFormat
const numberFormat = new Intl.NumberFormat("en-US", {
  style: "unit",
  unit: "mile-per-hour"
});
console.log(numberFormat.format(12345.6789)); // 12,345.679 mph 
console.log(numberFormat.format(765456.5468)); // 765,456.547 mph