How to Format Numbers as Currency String in JavaScript

As a software developer, it’s essential to know how to format numbers as currency strings in JavaScript.

In this tutorial, we’ll cover different ways to format numbers as currency strings, including the use of the built-in Intl object, custom functions, and library solutions.

In many applications, it’s necessary to display numbers as currency strings.

For example, when displaying a price for an item, it’s essential to format the number with a currency symbol and proper grouping of thousands.

Doing this manually can be time-consuming and error-prone, which is why it’s crucial to understand how to format numbers as currency strings in JavaScript.

Using the Intl Object

The Intl object in JavaScript provides a simple and straightforward way to format numbers as currency strings.

It supports a wide range of international currencies and provides many formatting options.

The syntax for using the Intl object to format numbers as currency strings is as follows:

let formatter = new Intl.NumberFormat('en-US', {
  style: 'currency',
  currency: 'USD'
});

let amount = 1234.56;

console.log(formatter.format(amount));

In this example, we create a new Intl.NumberFormat object and pass in the en-US locale and the USD currency.

The style option is set to currency to indicate that we want to format the number as a currency string.

Finally, we pass the amount to the format() method of the formatter, which returns the formatted currency string.

Custom Functions

In cases where the Intl object is not available or the formatting options are limited, it’s possible to write a custom function to format numbers as currency strings.

Here’s an example of a custom function that formats a number as a US currency string:

function formatCurrency(amount) {
  return '$' + amount.toLocaleString('en-US');
}

let amount = 1234.56;

console.log(formatCurrency(amount));

In this example, we use the toLocaleString() method to format the number as a string using the en-US locale.

Then, we concatenate the currency symbol $ to the beginning of the string.

Library Solutions

In addition to the built-in Intl object and custom functions, there are also many library solutions available for formatting numbers as currency strings in JavaScript.

For example, the numeral.js library provides a simple and intuitive API for formatting numbers as currency strings, as well as a wide range of customization options.

Here’s an example of how to use numeral.js to format a number as a US currency string:

let numeral = require('numeral');

let amount = 1234.56;

console.log(numeral(amount).format('$0,0.00'));

In this example, we use the numeral() function to create a new numeral object, passing in the amount.

Then, we call the format() method and pass in the desired format string $0,0.00.

The result is a properly formatted US currency string.

Conclusion

In this tutorial, we’ve covered different ways to format numbers as currency strings in JavaScript, including the use of the built-in Intl object, custom functions, and library solutions.

Each approach has its benefits and drawbacks, and the best solution will depend on your specific use case and requirements.

The Intl object provides a convenient and powerful way to format numbers as currency strings, with a wide range of international currencies and formatting options.

Custom functions offer a simple and lightweight solution, but may not be as feature-rich as the Intl object or library solutions.

Library solutions, such as numeral.js, offer a more advanced and customizable solution, but may add additional overhead to your project.

In conclusion, formatting numbers as currency strings in JavaScript is an essential skill for any software developer.

Whether you choose to use the Intl object, a custom function, or a library solution, it’s important to understand the different options available and select the best solution for your specific use case.