Formatting Monetary Values in JavaScript

Introduction

When building your web applications, you might need to format numbers as monetary values. For example, rather than displaying the value 123.45, you might want to display it as £123.45.

In this Quickfire article, we're going to look at two different approaches to formatting monetary values in JavaScript.

Formatting Single Monetary Values Using "toLocaleString()"

The first approach you can use to format monetary values in JavaScript is the toLocaleString() method. This method formats a number according to the locale and options you specify.

Let's take a look at an example:

        
1const value = 123.45;
2 
3const formattedValue = value.toLocaleString('en-GB', {
4  style: 'currency',
5  currency: 'GBP',
6});
7 
8// formattedValue will be '£123.45'    

In the example above, we've used the toLocaleString() method to format the value as a monetary value in British pound sterling (GBP).

The first argument (en-GB) specifies the locale, which determines how the number is formatted. The second argument provides some options for formatting, such as the style (currency) and the currency code (GBP).

Let's say we wanted to use the fr-FR locale to format the same value in Euros (EUR). We could do the following:

        
1const value = 123.45;
2 
3const formattedValue = value.toLocaleString('fr-FR', {
4  style: 'currency',
5  currency: 'EUR',
6});
7 
8// formattedValue will be '123,45 €'    

Customising the Precision

You may also want to customise the precision of the formatted values. For example, you may want to display the value without any decimal places. You can do this by using the minimumFractionDigits and maximumFractionDigits options.

For example, let's specify that the minimum number of decimal places that can be displayed is 0, and the maximum is 2:

        
 1const value = 123.456;
 2 
 3const formattedValue = value.toLocaleString('en-GB', {
 4  style: 'currency',
 5  currency: 'GBP',
 6  minimumFractionDigits: 0,
 7  maximumFractionDigits: 2,
 8});
 9 
10// formattedValue will be '£123.46'
11 
12const wholeValue = 123;
13 
14const formattedWholeValue = wholeValue.toLocaleString('en-GB', {
15  style: 'currency',
16  currency: 'GBP',
17  minimumFractionDigits: 0,
18  maximumFractionDigits: 2,
19});
20 
21// formattedWholeValue will be '£123'    

Formatting Multiple Monetary Values Using "Intl.NumberFormat"

Although it's simple to format a single monetary value using toLocaleString(), if you need to format multiple values, you might want to consider using Intl.NumberFormat. This allows you to create a reusable formatter that can be used to format multiple values.

For example, let's say we want to format multiple values in British Pounds Sterling (GBP):

        
1// Create the formatter that can be reused
2const formatter = new Intl.NumberFormat('en-GB', {
3  style: 'currency',
4  currency: 'GBP',
5});
6 
7const formattedValueOne = formatter.format(123.45); // '£123.45'
8const formattedValueTwo = formatter.format(67.89); // '£67.89'
9const formattedValueThree = formatter.format(1000); // '£1,000.00'    

As you can see in the example above, we can create a single, reusable formatter using Intl.NumberFormat and then pass each value we want to format to the format method.

Customising the Precision

Similar to the .toLocaleString() method, you can also customise the precision of the formatted values using Intl.NumberFormat. You can specify the minimumFractionDigits and maximumFractionDigits options when creating the formatter:

        
 1const formatter = new Intl.NumberFormat('en-GB', {
 2  style: 'currency',
 3  currency: 'GBP',
 4  minimumFractionDigits: 0,
 5  maximumFractionDigits: 2,
 6});
 7 
 8const formattedValueOne = formatter.format(123.456); // '£123.46'
 9const formattedValueTwo = formatter.format(67); // '£67'
10const formattedValueThree = formatter.format(1000); // '£1,000'    

Conclusion

In this Quickfire article, we've looked at how you can format monetary values in JavaScript using the toLocaleString() method and the Intl.NumberFormat object. Hopefully, this will help you in future projects where you need to display monetary values in a user-friendly way.

If you enjoyed reading this post, you might be interested in checking out my 220+ page ebook "Battle Ready Laravel" which covers similar topics in more depth.

Or, you might want to check out my other 440+ page ebook "Consuming APIs in Laravel" which teaches you how to use Laravel to consume APIs from other services.

If you're interested in getting updated each time I publish a new post, feel free to sign up for my newsletter below.

Keep on building awesome stuff! 🚀