How to Format a Number as Currency in JavaScript

Every country has its currency and different patterns or ways of displaying monetary amounts. When we appropriately express a number, it is easier to read and comprehend for readers.

When you use data from an API or an external resource, it will be in some generic format. For instance, if you are creating a store, you may have data such as pricing.

This article will walk you through how to format a number as Currency in JavaScript.

Let's dive in!

We will be using a random number, such as 17225, as shown in the arrays below:

const Journals = [

    {

        "id": 01,

        "name": "Software Development",

        "price": 100.80,

    },

    {

        "id": 02,

        "name": "Introduction to Programming",

        "price": 1534,

    },

        {

        "id": 04,

        "name": "Program or Be Programmed",

        "price": 17225,

    }

]

Even adding a currency sign does not solve the problem since commas and decimals must be added in the right locations. You would also like each price output to be formatted correctly, dependent on the currency. 

For example, 17225 would be $17,225.00 (US Dollars), 17,225.00 (Rupees), or €17,225,00 (Euros), depending on your chosen currency, location, and style. You may also use JavaScript's Intl.NumberFormat() function to convert these integers to currencies.

const price = 17225;

let KenyaShilling = new Intl.NumberFormat('en-Ke',

{

    style: 'currency',

    currency: 'KSH',

});

console.log(`The formatted version of {price} is {KenyaShilling.format(price)}`);

// The formatted version of 17225 is Ksh17,225.00

Output:

 Ksh 17,225.00  

How to Format Numbers as Currency Using the Intl.NumberFormat() Constructor

You may build Intl.NumberFormat objects that enable language-sensitive numerical formatting, such as currency formatting, using the Intl.NumberFormat() constructor.

This constructor considers two important factors: locales and options, which are both optional.

new Intl.NumberFormat(locales, options) // we can also use Intl.NumberFormat(locales, options)

Remember that Intl.NumberFormat() can be used either with or without "new." Both will create a new Intl.NumberFormat instance.

When no locale or option is given to the Intl.NumberFormat() constructor will simply format the integer by adding commas.

const price = 17225; console.log(new Intl.NumberFormat().format(price));

Output:

 17,225

As noted above, you are not looking for standard number formatting. Instead, you want to structure these numbers as currency so that it returns the currency sign with suitable formatting rather than having to write it manually.

We can now have a look and explore both parameters.

The First Argument: Locales

The locale argument is an optional string parameter that could be given. It denotes a particular geographical, political, or cultural territory. It only prepares the number according to the location and does not include currency formatting.

const price = 172250; console.log(new Intl.NumberFormat('en-US').format(price)); // 172,250 console.log(new Intl.NumberFormat('en-IN').format(price)); // 1,72,250 console.log(new Intl.NumberFormat('en-DE').format(price)); // 172.250

You will see that the numbers and prices have been formatted regionally based on your location. Let's look at the options parameter now to see how we may change the numbers to represent a currency.

The Second Argument: Options (Style, Currency…)

This is the major parameter, and you may use this to apply additional formatting, such as currency formatting. This is a JavaScript object that has additional arguments, such as:

Style: This specifies the sort of formatting you desire. This includes values such as decimals, currencies, and units.

Currency; is an additional choice. You may use this option to indicate the currency to format to, such as USD, CAD, GBP, INR, and many more.

// format number to US dollar

let USDollar = new Intl.NumberFormat('en-US', {

    style: 'currency',

    currency: 'USD',

});

// format number to British pounds

let Pounds = Intl.NumberFormat('en-GB', {

    style: 'currency',

    currency: 'GBP',

});

// format number to Indian rupee

let Rupee = new Intl.NumberFormat('en-IN', {

    style: 'currency',

    currency: 'INR',

});

// format number to Euro

let Euro = Intl.NumberFormat('en-DE', {

    style: 'currency',

    currency: 'EUR',

});

 

console.log('Dollars: ' + USDollar.format(price));

// Dollars: $172,250.00

console.log(`Pounds: ${pounds.format(price)}`);

// Pounds: £172,250.00

console.log('Rupees: ' + rupee.format(price));

// Rupees: ₹1,72,250.00 

console.log(`Euro: ${euro.format(price)}`);

// Euro: €172,250.00

The Third Argument: Maximum Significant Digits

MaximumSignificantDigits is another option. This allows you to round the price variables based on the number of significant figures you choose. 

For example, if you change the value to 3, 172,250.00 becomes 172,000.

let  euro= Intl.NumberFormat('en-'Euro, {

    style: 'currency',

    currency: 'EUR',

    maximumSignificantDigits: 3,

});

console.log(`Euro: ${euro.format(price)}`);

// Euro: £172,000

The scope of this article is just the basics of how to use JavaScript to convert a random number to a currency format.

Happy coding!