Sentry Answers>JavaScript>

How to format numbers as currency strings

How to format numbers as currency strings

Matthew C.

—

The ProblemJump To Solution

You want to format a number as a currency string to display to a user. How do you do this?

The Solution

You can create an Intl.NumberFormat object to format a number as a currency string. To create the object, call the Intl.NumberFormat() constructor. This object allows for language-sensitive number formatting.

The Intl.NumberFormat() constructor has two optional arguments: locales and options. The locales argument is a language tag string or an array of language tag strings. If you don’t pass in a locales string, the browser detects the preferred language of the user. The options object has multiple properties that can be set. For creating a currency string, set the formatting style property to “currency” and set the currency property to the ISO 4217 currency code for the currency. You can find a list of the currency codes here.

Here’s an example of how to format a number as a currency string:

Click to Copy
const { format } = new Intl.NumberFormat('en-US', {
  style: 'currency',
  currency: 'USD',
});

console.log(format(101.04)); // $101.04
console.log(format(99.99)); // $99.99

You can also set the currencyDisplay property of the options object to change how the currency is displayed. The default value is “symbol” but if you change it to “name”, the localized currency name is displayed. You can also control the number of decimal places by using the maximumFractionDigits property:

Click to Copy
const { format } = new Intl.NumberFormat('en-US', {
  style: 'currency',
  currency: 'USD',
  maximumFractionDigits: 1,
  currencyDisplay: 'name',
});

console.log(format(101.04)); // 101.0 US dollars
console.log(format(99.99)); // 100.0 US dollars

If you need to round the fractional digits of the currency to the nearest fractional increment, for example 0.1, you can use the roundingIncrement property:

Click to Copy
const { format } = new Intl.NumberFormat('en-Za', {
  style: 'currency',
  currency: 'ZAR',
  maximumFractionDigits: 2,
  roundingIncrement: 10,
});

console.log(format(84.34)); // R 84,30
console.log(format(22.35)); // R 22,40
  • ResourcesImprove Web Browser Performance - Find the JavaScript code causing slowdowns
  • SentryJavascript Error Monitoring & Tracing
  • ResourcesJavaScript Frontend Error Monitoring 101
  • Syntax.fmListen to the Syntax Podcast
  • Syntax.fm logo
    Listen to the Syntax Podcast

    Tasty treats for web developers brought to you by Sentry. Get tips and tricks from Wes Bos and Scott Tolinski.

    SEE EPISODES

Considered “not bad” by 4 million developers and more than 100,000 organizations worldwide, Sentry provides code-level observability to many of the world’s best-known companies like Disney, Peloton, Cloudflare, Eventbrite, Slack, Supercell, and Rockstar Games. Each month we process billions of exceptions from the most popular products on the internet.

learn more about sentryjoin our discord
© 2024 • Sentry is a registered Trademark
of Functional Software, Inc.