Imagine you are doing online shopping. You may not want to see the price of an item in a different currency, you may also want to know when you can receive your items. For any organization that wants to go global, being aware of the different formats of currency and time is crucial to building the localizability of its own product. In our final project for the website localization class, we chose to learn how to format currency and time by using JavaScript. In this team of two, I was responsible for formatting the currency through JavaScript. With this blog post, I’d like to share some easy methods to format the currency by using the built-in function of JavaScript.

What to Consider When Doing Currency Localization

Before we get our hands dirty, think for a while what should be considered when we are localizing a currency. Here, I’ll list three basic elements we need to consider.

Symbols

Symbols like $, ￥, £,  €, are the first things people look at when they are identifying a currency.  Although many countries share the same currency symbol, the position of the symbol may vary. For example, in France, Euro sign is placed at the end of the currency, but in the Unites States, dollar sign is usually placed on the left of a number.

• $123
• 123€

Use of decimal points and commas

The following two numbers actually have the same value, but the use of decimal points and commas are different.

• 1,234.56 .123
• 1,234,560,123

Currency conversion

Although the conversion issue is not covered by my final project, it is necessary to keep in mind that automatically converting one currency into another is dispensable when building a localized website. To  perform currency conversion in JavaScript, you’ll need a reliable source of real-time exchange rates.

Built-in Internationalization (i18n) Functions in JavaScript to do Currency Localization

There are many ways to localize a currency by using different coding methods. JavaScript has some basic functions to localize a certain number into desired format, which is also one of the easiest way to do the localization.

The Intl object is the namespace for the ECMAScript Internationalization API, which provides language sensitive string comparison, number formatting, and date and time formatting.[1] By applying the i18n function (Intl.NumberFormat), we can easily turn a number to the desired format. Here, I’ll describe the needed steps.

The syntax:

new Intl.NumberFormat([locales[, options]])

Intl.NumberFormat.call(this[, locales[, options]])

Three steps to turn a number into a desired currency format:

1.In basic use without specifying any locale, a formatted string in the default locale and with default options is returned.

var number = 1234;

new Intl.NumberFormat().format(number)

// → ‘1,234’ if in US English locale

2.Now, let’s add a locale, for example de-DE.

var number = 123456.789

new Intl.NumberFormat(‘de-DE’).format(number)

// → 123.456,789

3.Now, let’s tell JavaScript we want to format the number as a currency. We can do that by specifying the options.

var number = 123456.789

new Intl.NumberFormat(‘de-DE’, { style: ‘currency’, currency: ‘EUR’ }).format(number)

// → 123.456,79 €

The toLocaleString() Method in JavaScript

Similar with the i18n function in JavaScript, the toLocaleString() method can also give the same result. However, the toLocaleString is not really language or locale responsive, it is actually using the host environment’s current locale. If we want our website responsive to the language or locale we choose from a selector, we should abandon this method.

Creating a Demo

The biggest challenge I’ve encountered when doing this project was creating a demo from scratch. Without any computer science background, using limited knowledge about html, css and JavaScript to create a demo was never easy. To better visualize the i18n function in JavaScript, I decided to put the following elements in my demo.

1. An input box for numbers.

2. A dropdown selector of currency type.

2. The formatted result according to selected currency.

 

What went wrong?

1. The i18n built-in function in JavaScript is not accurate enough in reflecting the right format of the Chinese currency CNY.

Do Chinese people use comma to separate thousands? If the number is shorter than 4 digits, comma will not be used. However, if the number is longer than 4 digits, commas will be used. This differentiation could not be performed by JavaScript’s i18n function, as it’s using comma to separate thousands all the time.

2. The format of Euro varies in different countries.

Although Euro is the unified currency for many countries in the EU, the way of writing down the currency varies across EU countries. For example, Germany puts the currency symbol at the end of each number, and uses comma as decimal separator and period for thousands. In France, however, people don’t use period for thousands.

Obviously, when we cannot decide the original country of a user, it is important to keep in mind that there might be different countries sharing the same currency. That’s why when we are setting locales, we use both language code and the country code.

3. The conversion and calculation between different currencies were not included.

The i18n function in JavaScript cannot convert a currency to another. To show the exact amount of money in another currency. We need to add calculation formula to our JavaScript.

(You can access the code from my GitHub)

[1] https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl