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" :

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?