Confusion between currency and locale formats

[Gwened]

It seems this lib only allows one format per currency. However, the format, in particular symbolOnLeft, usually depends on the locale. For example, I think Canadians speaking French will use 5$ while English speakers write $5. In a similar way, if I'm targeting brits traveling in Europe, I would write €5 instead of 5 €.

Is there something I'm missing?

[smirzaei]

The locale specific formatting is a bit tricky.

@edorivai created a solution for us to be able to format currencies based on user's locale but you won't be able to format USD currency for en-GB locale for example. It will show the £ symbol in that case. Checkout #29

Some examples:

currencyFormatter.format(1000000, { locale: 'de-DE' });
// => '1 000 000,00 €'

currencyFormatter.format(1000000, { locale: 'nl-NL' });
// => '€1.000.000,00'

Our locale formatting data is very limited at the moment. You can add the missing locales here localeFormats.json and send a PR.

Another solution is to use the Intl APIs. More specifically the NumberFormat. The only problem with the Intl APIs is that it's not consistent across different browsers.

[edorivai]

I created the locale based formatting, only for the use case of formatting the currency that corresponds with that specific locale. Frankly, I didn't even think about formatting a different locale. However, the current setup still allows you to use a locale based format for a different currency!

@smirzaei is right, the locale formatting data is very limited, I only added the nuances in rendering Euro values, and am hoping for others to help us out here by adding more locale formats.

To give you a bit more info into how it works; the locale formats in localeFormats.json are used to overwrite the default formatting for a currency. If you don't specify a specific currency code, but you do specify the locale, it will try to find the appropriate currency for that locale. For example { locale: nl-NL } will automatically select EUR as the currency. The default formatting for EUR looks like this:

	{
		"code": "EUR",
		"symbol": "€",
		"thousandsSeparator": " ",
		"decimalSeparator": ",",
		"symbolOnLeft": false,
		"spaceBetweenAmountAndSymbol": true,
		"decimalDigits": 2
	},

And the locale formatting for nl-NL looks like this:

	{
		"symbolOnLeft": true,
		"spaceBetweenAmountAndSymbol": false,
		"thousandsSeparator": "."
	},

The formatting data is applied like so:

assign({}, defaultCurrency, findCurrency(code), localeFormat)

Which means that the fields in the locale format for nl-NL will overwrite those the defaults for EUR. This results in the following formatting object:

	{
		"code": "EUR",
		"symbol": "€",
		"thousandsSeparator": ".", // overwritten
		"decimalSeparator": ",",
		"symbolOnLeft": true, // overwritten
		"spaceBetweenAmountAndSymbol": false, // overwritten
		"decimalDigits": 2
	},

This mutates an original format of 1 234,56 € to €1.234,56.

So this system should work fairly well for your use case. All you need to do is add the formatting rules for the locales you need, and you should be good to go.

One last thing; this issue actually brought up a problem with the current version of the locale formats. I've already submitted a PR in #38, so you might want to wait until that is merged ;).

[edorivai]

Oh, and if it wasn't clear already, after adding your locale formatting, just use it like so:

currencyFormatter.format(1234.56, { code: 'USD', locale: 'fr-CA' });
// => '1 234.56 $'
currencyFormatter.format(1234.56, { code: 'USD', locale: 'en-CA' });
// => '$1 234.56'

Output will depend on your implementation of the locale format of course :)

[Gwened]

Thank you for considering this issue. In the meantime, I found the currencyFormatter.js lib from OSREC. While some features are missing, the currency and locale formats can be set separately. FYI you can find my fork here, adding the ability to display prices as integers: https://github.com/Gwened/currencyFormatter.js

[edorivai]

@Gwened thanks for the link to currencyFormatter.js. That's a really cool lib, especially their base of currencies and locales. I'm gonna see if I can reuse their config base in this lib. It seems that they don't support code splitting (in other words; only including the currencies and locales that you want to support), which is something we're looking into for v2.