Currency formatting using Intl.NumberFormat without currency symbol

user_1214289 0
Viewed 4807

I am trying to use Intl as a default currency formatter and it is almost perfect.

Using the example from a Intl.NumberFormat() constructor:

const number = 123456.789;

console.log(new Intl.NumberFormat('de-DE', { style: 'currency',
currency: 'EUR' }).format(number)); // expected output: "123.456,79 €"
 
// the Japanese yen doesn't use a minor unit 
console.log(new Intl.NumberFormat('ja-JP', { style: 'currency', currency: 'JPY'
}).format(number)); // expected output: "￥123,457"

This is almost perfect but I would actually like to drop the symbol from the output. So I would expect to see:

// expected output: "123.456,79"
// expected output: "123,457"

I find it bizarre that I spend over an hour looking for a solution and only found some sort of replace/trim usage.

Why there is not an option to format the number with all the Intl power but only dropping the currency symbol?!?

I hope I missed it, tbh.

number-formatting javascript
2 Answers

One simple way to do achieve what you want is to use String#replace() to remove the currency from the string. To make this easier, you can set currencyDisplay to "code" which will use the ISO currency code - the same one passed in to currency:

const number = 123456.789;

console.log(new Intl.NumberFormat('de-DE', { 
    style: 'currency',
    currency: 'EUR', 
    currencyDisplay: "code" 
  })
  .format(number)
  .replace("EUR", "")
  .trim()
); // 123.456,79
 
// the Japanese yen doesn't use a minor unit 
console.log(new Intl.NumberFormat('ja-JP', { 
    style: 'currency', 
   currency: 'JPY', 
    currencyDisplay: "code" 
  })
  .format(number)
  .replace("JPY", "")
  .trim()
); // 123,457

This can be extracted into a function:

const number = 123456.789;

console.log(format('de-DE', 'EUR', number)); // 123.456,79
console.log(format('ja-JP', 'JPY', number)); // 123,457

function format (locale, currency, number) {
  return new Intl.NumberFormat(locale, { 
    style: 'currency', 
    currency, 
    currencyDisplay: "code" 
  })
  .format(number)
  .replace(currency, "")
  .trim();
}

An alternative that allows you more control is to use Intl.NumberFormat#formatToParts() which formats the number but gives you tokens that you can programmatically consume and manipulate. For example, using the method with locale = "de-DE" and currency = "EUR" you get the following output:

[
  {
    "type": "integer",
    "value": "123"
  },
  {
    "type": "group",
    "value": "."
  },
  {
    "type": "integer",
    "value": "456"
  },
  {
    "type": "decimal",
    "value": ","
  },
  {
    "type": "fraction",
    "value": "79"
  },
  {
    "type": "literal",
    "value": " "
  },
  {
    "type": "currency",
    "value": "EUR"
  }
]

Which means that you can easily filter out "type": "currency" and then combine the rest into a string. For example:

const number = 123456.789;

console.log(format('de-DE', 'EUR', number)); // 123.456,79
console.log(format('ja-JP', 'JPY', number)); // 123,457

function format (locale, currency, number) {
  return new Intl.NumberFormat(locale, { 
    style: 'currency',
    currency, 
    currencyDisplay: "code" 
  })
  .formatToParts(number)
  .filter(x => x.type !== "currency")
  .map(x => x.value)
  .join("")
  .trim()
}

user_36894500

If you only want the separators in between individual digits, just format as a number instead of using currency:

const numberFormatter = new Intl.NumberFormat("en-US", {
  // Do not show fractions - front end should only handle whole numbers
  maximumFractionDigits: 0,
});

And then numberFormatter.format(asNumber); with whatever number you like.

For your example of 123456, "de-DE" is 123.456, "ja-JP" is 123,456

user_1236710
Related