Browser intl.NumberFormat not displaying currency symbols correctly

Question

I'm attempting to write a currency formatting function using Intl.NumberFormat. It works correctly when I pass it things like USD, or EUR as the currency, but seems to break when I pass it more obscure currency codes like PLN or COL, and instead of displaying their symbols as requested it displays the Codes. It is clearly recognizing the code because when I ask it to display the name instead it works correctly:

Intl.NumberFormat("en-US",{
  style:'currency',
  minimumIntegerDigits:1,
  currency: 'PLN',
  currencyDisplay: 'symbol'
}).format(43);

Displays "PLN43" while

Intl.NumberFormat("en-US",{
  style:'currency',
  minimumIntegerDigits:1,
  currency: 'PLN',
  currencyDisplay: 'name'
}).format(43);

Displays "43.00 Polish zlotys"

Colleen

No access to check first but what happens if you specify pl-PL as the first parameter in the examples above? – Vernavernacular

Answer 1

The Intl.NumberFormat should have the symbols you need, you just have to make sure you specify the correct language code.

You can find a mapping of ISO language codes here: https://www.w3schools.com/tags/ref_language_codes.asp

In this case you will need to use the Polish value "pl" instead of "en-US"

Intl.NumberFormat("pl",{
  style:'currency',
  minimumIntegerDigits:1,
  currency: 'PLN',
  currencyDisplay: 'symbol'
}).format(43);

Parlando

So this means we have to change the number formatting in order to use the symbol. If we want to display multiple "obscure" currencies with symbols, the formatting would not be consistent... [['pl', 'PLN'], ['th', 'THB']].map(([locale, currency]) => new Intl.NumberFormat(locale, { style: 'currency', currency, currencyDisplay: 'symbol' }).format(10000)) yields ["10 000,00 zł", "฿10,000.00"] – Submerse

This is nonsense. Isn't there a way to override this behavior? – Forest

Answer 2

To display just the currency symbol more concisely, you might consider using currencyDisplay: 'narrowSymbol' instead of symbol in your Intl.NumberFormat configuration. This option is also applicable for toLocaleString. As explained in the MDN documentation, narrowSymbol provides a more streamlined symbol format, e.g., "$100" rather than "US$100".

Intl.NumberFormat("en-US", {
  style: 'currency',
  currency: 'PLN',
  currencyDisplay: 'narrowSymbol'
}).format(43);

Displays 'zł 43.00'

However, please verify the compatibility with your target browsers here on CanIUse as narrowSymbol is not supported in some older or less common browsers.

Aspen

Answer 3

According to the spec:

However, the set of combinations of currency code and language tag for which localized currency symbols are available is implementation dependent. Where a localized currency symbol is not available, the ISO 4217 currency code is used for formatting.

Ruffi

What does "not available" mean...? Is there anywhere I can contribute the currency symbols for these ISO codes so I can continue using this formatter or will I have to come up with an alternate solution? – Saguache

I might suggest available are symbols that are present in unicode. – Whiny