CODEWITHSUNDEEP
javascriptinternationalizationcurrencyintl
Yanick Rochon
Yanick Rochon

Reputation: 53536

How to ensure Int.NumberFormat does not show currency code when using the same country?

Given a locale fr-CA, displaying a currency value in CAD, how can I have the country code not show? Because en-CA displays "$1.00" and fr-CA displays "1.00 $ CAD" for no apparent reason.

See snippet below :

[
  'fr-CA',
  'en-CA',
  'en-US'
].forEach(locale => {
   document.getElementById('label_' + locale).innerHTML = new Intl.NumberFormat(locale, { style: 'currency', currency: 'CAD' }).format(0.25);
});
.currency {
  padding-right: 10px;
}

.error {
  color: white;
  background-color: red;
  font-weight: 900;
  padding: 0 10px;
}

.success {
  color: green;
}
<p>Should <strong>not</strong> display CAD because same country (fr-CA)</p>
<span class="currency" id="label_fr-CA"></span><span class="error">err!</span>
<p>Should not display CAD because same country (en-CA)</p>
<span class="currency" id="label_en-CA"></span><span class="success">OK</span>
<p>Should display CAD because different country (en-US)</p>
<span class="currency" id="label_en-US"></span><span class="success">OK</span>

Why is the country displayed inconsistently given two locales with the same country code, and can this be normalized?

** Edit **

This is what I see in my browser, because my locale is currently set to "fr" : enter image description here

The locale "fr-CA" displays 0,25 $ CA while "en-CA" displays $0.25; both locales have the same country code (i.e. CA), which is also the same as the currency country code, so why is the country code displayed with "fr-CA"" and not "en-CA"?

Using a different browser, with it's locale set to "en-CA", everything displays as it should. So, why does Intl.NumberFormat not consistent with the values it receives, since it asks for the locale, but end up depending on the browser locale inside it's black box?

Upvotes: 2

Views: 1011

Answers (1)

Yanick Rochon
Yanick Rochon

Reputation: 53536

Following Randy Casburn's comment, I opened an issue with the tc39 / ecma402 repository, and the discussion went from there to the CLDR but report, which states that

250 CAD in fr-CA should be 250,00 $
250 CAD in en-CA should be $250.00
250 CAD in fr-FR should be 250,00 $ CA
250 CAD in en-US should be Can$250.00/CAN$250.00

In other words, exactly as this question is asking.

The resolution is that this will most likely get resolved in the next release. As of this time, the next release is v40, scheduled for October 2021.

Note: the current behavior is inconsistent across browsers. For example, Firefox does not currently exhibit this behavior, but Chrome does. Hopefully, some day, all browsers will conform to the same specifications.

Upvotes: 1

Related Questions