jQuery Globalization. Pass currency unit as argument for C format

Question

I am setting up a multilingual site that deals with currencies. I want to be able to display correct currency formats based on the selected language. The server side PHP stuff is a doddle. Using a combination of PHPs NumberFormatter and strftime I have been able to format currencies and dates correctly.

There is however a requirement to have the same degree of formatting done client side with javascript.

I have come across Globalization (former jQuery plugin) and it looks quite promising.

If I want to display a dollar value in American English I can do something like this:

jQuery.preferCulture("en-US");

// Formatting price
var price = jQuery.format(3899.888, "c");
//Assigning stock price to the control
jQuery("#price").html(price);

and this will output:

$3,899.89

While doing:

jQuery.preferCulture("fr-FR");

// Formatting price
var price = jQuery.format(3899.888, "c");
//Assigning stock price to the control
jQuery("#price").html(price);

outputs:

3 899,89 €

which looks perfect. however, I have a need to output multiple currencies. So, if I have 'fr-FR' selected as my preferred culture, how can I output, say, a dollar value like so:

3 899,89 $

so that the format is French, but the value is American Dollar. I have looked but not found anyway to pass a currency symbol as an argument.

Answer 1

The only documented way to modify the currency symbol in Globalize is to change the numberFormat.currency.symbol property of a given culture—in this case, the fr-FR culture. This will kind of do what you want, but it’s not a very elegant solution, and you would need to manually build a table of correct symbols for each locale and write another method to swap them out. (n.b. It is possible to pass a third argument to Globalize.format with a different locale identifier, but this just formats the number using that locale’s cultural settings.) Looking at the culture definition syntax, there is simply no provision for displaying different currencies using a given locale.

If you were to look elsewhere, the dojo/currency module in the Dojo Toolkit does do exactly what you need, using data from the Unicode Common Locale Data Repository to determine how to represent various currencies in different locales. So you can set your locale to fr, write currency.format(3899.888, { currency: "USD" }), and it will output the currency in USD in the correct format for the French locale.

Answer 2

I had the same problem, in the end I just replaced the default currency symbol on the output with the symbol I wanted to display. It's a bit primitive but it keeps the formatting correct for the locale with the currency symbol you want.

function formatCurrency(value, format, symbol){
    var formattedValue = Globalize.format(value, format);

    if (typeof symbol === "string") { 
     formattedValue = formattedValue.replace(Globalize.culture().numberFormat.currency.symbol, symbol);
    }

    return formattedValue;
}

document.getElementById("price1").innerHTML = formatCurrency(123.34,"c"); //<-- $123.34
document.getElementById("price2").innerHTML = formatCurrency(123.34,"c","£"); //<-- £123.34

Here is the fiddle