How can I format numbers as dollars currency string in JavaScript?

Front End Technology Javascript Web Development

This tutorial teaches us to format numbers as a dollar currency string in JavaScript. Now, the question arises that why we need to format the numbers as a dollar currency string? Well, the answer is here. Users can think about the scenario where they are developing an eCommerce website or application and must show product prices to the customers. What if they render product prices like 2500 and $2500? The second one looks better as ‘$’ represents the USD currency and is the standardized way to show off the USD currency. Also, second approach is more understandable.

Below, we have given different approaches to solve the above problem and show the numbers as a USD currency string.

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

Using the String Concatenation

In this approach, we will simply use the string concatenation using the ‘+’ sign in JavaScript. This approach is the easiest way to represent the number as a dollar currency string.

Syntax

let price = 1642;
var currencyUSD = ‘$’ + price;

Example 1

The below example demonstrates how users can add the ‘$’ sign to the number using the string concatenation in JavaScript.

<!DOCTYPE html>
<html>
<body>
   <h2>Format Numbers as a dollar currency string</h2>
   <p> Formatting 1642 as US dollars (US$):</p>
   <p id="result"> </p>
   <script type="text/javascript">
      // function to format number with $ sign.
      function formatNumberWithDollar() {
         let price = 1642;
         let formattedPrice = '$' + price;
         var result = document.getElementById("result");
         result.innerHTML = formattedPrice ;
      }
      formatNumberWithDollar();
   </script>
</body>
</html>

In the above output, Users can see that how our price is formatted with the dollar currency sing string.

Using the Intl.NumberFormat() Method

One of the best ways in JavaScript to format the number as a currency string is to use Intl.NumberFormat() method. You can pass the locale to the method as a parameter and set the dollar sign before the number and format number.

Some of you have heard the Locale word for the first time. It is not any method inside JavaScript, but it provides the set of parameters according to the local region. In simple terms, it specifies the regional number format, date and time format, currency format, weekday format, etc.

Syntax

let formatting_options = {
   style: 'currency',
   currency: 'USD',
   minimumFractionDigits: 3,
}
let dollarString = new Intl.NumberFormat( locale_string, formatting_options );

Parameters

locale_string − It should be passed according to the for which region you want to get local parameters. For example, to get local parameters of the USA, you will pass ‘en-US,’ and for India, you will pass ‘en-IN.’
formatting_options − It is the object which contains lots of properties to format the number string. Mainly, the below three properties of options are more valuable.
style − It is the basic style of the number formatted string. It takes three different values, such as “currency,” “decimal,” and “percentage.” In our case, we will use “currency.
currency − This parameter specifies the currency's symbol, such as “USD” for the US dollar.
minimumFractionDigits − By using this parameter, we can round off the digits of the number after decimal points.

Example 2

The below example demonstrates the use of the Intl.NumberFormatting() method.

<!DOCTYPE html>
<html >
<head>
<body>
   <h2> The Intl.NumberFormat() method</h2>
   <p> Formatting 5323.35445 as US dollars (US$):</p>
   <p id="result"></p>
   <p> We set minimumFractionDigits to 3.</p>
   <script type="text/javascript">
      // function to format number with Intl.NumberFormat() method.
      function formatNumberWithDollar() {
         let formatting_options = {
            style: 'currency',
            currency: 'USD',
            minimumFractionDigits: 3,
         }
         // users can see how locale passed as a parameter.
         let dollarString = new Intl.NumberFormat("en-US", formatting_options);
         let finalString = dollarString.format(5323.35445);
         var result = document.getElementById("result");
         result.innerHTML = finalString;
      }
      formatNumberWithDollar();
   </script>
</body>
</html>

In the above output, users can see that number is rounded till 3 points and represented as the string with dollar sign.

Using the toLocaleString() Method

The toLocaleString() is also built-in method in JavaScript like Intl.numberFormat() method. It takes the same parameter as Intl.numberFormat method takes and converts the strings into the region-specific.

Syntax

let formatting_options = {
   style: ‘currency’,
   currency: ‘USD’,
   minimumFractionDigits: 3,
}
let dollarString = toLocaleString( locale_string, formatting_options );

Parameters

It takes the same parameters as Intl.numberFormat() method takes. Users can refer the above approach for that.

Example 3

The below example demonstrate the formatting the number with dollar sign using the toLocaleString() method.

<!DOCTYPE html>
<html >
<head>
<body>
   <h2> The toLocaleString() method</h2>
   <p> Formatting 2434454.6554 as US dollars (US$):</p>
   <p id="result"></p>
   <script type="text/javascript">
      let formatting_options = {
         style: 'currency',
         currency: 'USD',
         minimumFractionDigits: 3,
      }
      let price = 2434454.6554;
      let numberWithDollar = price.toLocaleString("en-US",
      formatting_options);
      var result = document.getElementById("result");
      result.innerHTML = numberWithDollar;
   </script>
</body>
</html>

The above method gives the same output as the Intl.numberFormat() method. In the above result, users can see that number is formatted with a dollar sign and rounded off to 3 digits after the decimal point.

Conclusion

This tutorial teaches us three different approaches to format the number with dollar strings. The best and standard approach to solve our problem is the second approach. Using the Intl.numberFormat() method, you can convert all strings, numbers, and parameters to region-sensitive strings.