How to format numbers as currency strings in JavaScript?

To format numbers as currency strings in JavaScript, you can use built-in methods like Intl.NumberFormat (recommended for modern apps) or manual string manipulation. Below are multiple approaches with examples:

1. Using `Intl.NumberFormat` (Modern Browsers)

The recommended way for localization support (e.g., commas, currency symbols, decimals).

const amount = 123456.789;

// Format as USD ($)
const usdFormatter = new Intl.NumberFormat('en-US', {
  style: 'currency',
  currency: 'USD',
  minimumFractionDigits: 2, // Ensure 2 decimal places
});

console.log(usdFormatter.format(amount)); 
// Output: "$123,456.79"

// Format as Euro (€) for Germany
const eurFormatter = new Intl.NumberFormat('de-DE', {
  style: 'currency',
  currency: 'EUR',
});

console.log(eurFormatter.format(amount)); 
// Output: "123.456,79 €"

// Format as Japanese Yen (¥) with no decimals
const jpyFormatter = new Intl.NumberFormat('ja-JP', {
  style: 'currency',
  currency: 'JPY',
  maximumFractionDigits: 0, // Remove decimals
});

console.log(jpyFormatter.format(amount)); 
// Output: "￥123,457"

Key Options:

style: 'currency' (required).
currency: ISO currency code (e.g., 'USD', 'EUR', 'JPY').
minimumFractionDigits: Minimum decimal places (defaults to 2 for most currencies).
maximumFractionDigits: Maximum decimal places.

2. Using `toLocaleString` (Simpler Syntax)

Shortcut for basic currency formatting:

const amount = 123456.789;

// USD format
console.log(amount.toLocaleString('en-US', { 
  style: 'currency', 
  currency: 'USD' 
})); 
// Output: "$123,456.79"

// Indian Rupee (₹) with Indian numbering
console.log(amount.toLocaleString('en-IN', { 
  style: 'currency', 
  currency: 'INR' 
})); 
// Output: "₹1,23,456.79"

3. Manual Formatting (Without `Intl`)

For environments without Intl support (e.g., legacy browsers):

function formatCurrency(amount, currencySymbol = '$', decimalCount = 2) {
  // Round to decimals and split integer/decimal parts
  const fixedAmount = amount.toFixed(decimalCount);
  const [integerPart, decimalPart] = fixedAmount.split('.');

  // Add commas to the integer part
  const formattedInteger = integerPart.replace(/\B(?=(\d{3})+(?!\d))/g, ',');

  // Combine parts with currency symbol
  return `${currencySymbol}${formattedInteger}.${decimalPart}`;
}

// Example:
console.log(formatCurrency(123456.789)); 
// Output: "$123,456.79"
console.log(formatCurrency(123456.789, '€', 2)); 
// Output: "€123,456.79"

Limitations:

Doesn’t handle locale-specific formatting (e.g., 1,23,456.79 for India).
Decimal and thousand separators are hardcoded (e.g., . and ,).

4. Handling Edge Cases

Negative Values:

  const amount = -1234.56;
  const formatter = new Intl.NumberFormat('en-US', { 
    style: 'currency', 
    currency: 'USD' 
  });
  console.log(formatter.format(amount)); 
  // Output: "-$1,234.56"

Zero Decimals (e.g., Japanese Yen):

  const amount = 123456;
  const formatter = new Intl.NumberFormat('ja-JP', { 
    style: 'currency', 
    currency: 'JPY',
    maximumFractionDigits: 0 
  });
  console.log(formatter.format(amount)); 
  // Output: "￥123,456"

5. Popular Currency Codes

Currency	Code	Example Output
US Dollar	`USD`	`$1,234.56`
Euro	`EUR`	`€1.234,56`
British Pound	`GBP`	`£1,234.56`
Indian Rupee	`INR`	`₹1,23,456.79`
Japanese Yen	`JPY`	`￥123,457`

Key Notes

Browser Support: Intl.NumberFormat works in all modern browsers and Node.js.
Precision: Avoid floating-point rounding errors by using libraries like currency.js for financial apps.
Localization: Always specify the locale (e.g., 'en-US' vs. 'de-DE') for correct formatting.

Summary

Use Intl.NumberFormat for localized, clean, and reliable currency formatting.
Use toLocaleString for quick formatting without creating a formatter object.
Use manual methods only for legacy environments.

For more details, see the MDN Documentation.

1. Using Intl.NumberFormat (Modern Browsers)