Format String as Currency in Javascript

Home /

Table of Contents

About format numbers as currency strings in javascript

This lesson shows us how to format integers in JavaScript into strings representing the dollar. The reason why we must format the numbers as a dollar currency string is now in doubt. Well, this is the solution. Users might imagine themselves in the position of having to display product pricing to clients while creating an eCommerce website or application. What if they offer goods for 2500 and $2500? The second one seems better since “$” stands for the US dollar and is the accepted way to display the US dollar. The second strategy is also easier to comprehend.

The solutions to the aforementioned problem are provided below, along with a string of numbers representing the USD money.

  • Using the String Concatenation
  • Using the Intl.NumberFormat() Method
  • Using the toLocaleString() Method

Using String Concatenation

You can format numbers as currency strings using string concatenation by following these steps:

1. Use the ‘.toFixed()’ method to round the number to the desired number of decimal places. This will convert the number to a string. For example:

JavaScript
var number = 123456.789;
var rounded = number.toFixed(2);

2. Use string concatenation to add the currency symbol (e.g. “$”) to the beginning of the string. For example:

JavaScript
var currency = "$" + rounded;

3. Use the ‘.replace()’ method to add commas as thousand separators. This is done by searching for every three digits from the right of the number and adding a comma before them.

JavaScript
var currency = "$" + rounded.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",");

Here is an example of all steps together:

JavaScript
var number = 123456.789;
var rounded = number.toFixed(2);
var currency = "$" + rounded.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",");
console.log(currency); // "$123,456.79"

This will format the number as a currency string with the dollar sign and commas as the thousand separator.

Using Intl.NumberFormat() method

You can use the ‘Intl.NumberFormat()’ method to format numbers as currency strings in JavaScript. The method takes two arguments: the first is the locale, and the second is an options object that can include the currency style.

Here is an example:

JavaScript
var number = 123456.789;
var options = { style: 'currency', currency: 'USD' };
var formatter = new Intl.NumberFormat('en-US', options);
var result = formatter.format(number);
console.log(result); // "$123,456.79"

You can also use the ‘Intl.NumberFormat’ method without passing an options object, it will default to the browser’s default locale and currency.

JavaScript
var number = 123456.789;
var formatter = new Intl.NumberFormat();
var result = formatter.format(number);
console.log(result); // "123,456.79"

You can also pass the currency code as a string to the constructor of the ‘Intl.NumberFormat’ method. For example, to format a number as Japanese Yen:

JavaScript
var number = 123456.789;
var formatter = new Intl.NumberFormat('ja-JP', { style: 'currency', currency: 'JPY' });
var result = formatter.format(number);
console.log(result); // "¥123,457"

The ‘Intl.NumberFormat’ method provides a more robust and flexible way to format numbers as currency strings, as it takes into account the user’s locale and currency settings, and it also provides more options for customizing the format. It also provides better support for different locales and currencies.

Video Tutorial

Using toLocalString() method

The ‘toLocaleString()’ method can be used to format numbers as currency strings in JavaScript. The method takes two arguments: the first is the locale, and the second is an options object that can include the currency style.

Here is an example:

JavaScript
var number = 123456.789;

var options = { style: 'currency', currency: 'USD' };

var result = number.toLocaleString('en-US', options);

console.log(result); // "$123,456.79"

You can also use the ‘toLocaleString’ method without passing an options object, it will default to the browser’s default locale and currency.

JavaScript
var number = 123456.789;
var result = number.toLocaleString();
console.log(result); // "123,456.79"

You can pass the currency code as a string as the first parameter of the toLocaleString method. For example, to format a number as Japanese Yen:

JavaScript
var number = 123456.789;
var result = number.toLocaleString('ja-JP', { style: 'currency', currency: 'JPY' });
console.log(result); // "¥123,457"

The ‘toLocaleString’ method provides a simple way to format numbers as currency strings, as it takes into account the user’s locale and currency settings, and it also provides more options for customizing the format. It also provides good support for different locales and currencies.

It’s worth noting that some older browser versions may have partial support for the ‘toLocaleString’ method, in those cases it could be better to use the ‘Intl.NumberFormat’ method instead.

Share The Tutorial With Your Friends
Twiter
Facebook
LinkedIn
Email
WhatsApp
Skype
Reddit
Other Recommended Article