简体   繁体   中英

Currency formatting using Intl.NumberFormat without currency symbol

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.

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() }

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

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM