How to Format Numbers with Commas in TypeScript (With Practical Examples)

Have you ever needed to display large numbers in a more readable way, like 1,000,000 instead of 1000000, in your TypeScript projects? If you’re working with financial data, sales reports, or any application that handles big numbers, you know how important it is to make your data user-friendly.

In this tutorial, I’ll walk you through the most effective ways to format numbers with commas in TypeScript with some practical examples.

Method 1: Using toLocaleString()

The easiest and most robust way to format numbers with commas in TypeScript is using the built-in toLocaleString() method. This method is part of JavaScript and works perfectly in TypeScript, too.

Example: Format US Sales Data

const usSales: number = 1234567890;
const formattedSales = usSales.toLocaleString('en-US');
console.log(formattedSales); // Output: 1,234,567,890

Why I recommend this method:

• It’s simple and reliable.
• It automatically handles commas and decimal points based on locale.
• You can easily switch between locales (e.g., 'en-US', 'de-DE').

Customize for Currency:

const revenue: number = 9876543.21;
const formattedRevenue = revenue.toLocaleString('en-US', {
  style: 'currency',
  currency: 'USD',
});
console.log(formattedRevenue); // Output: $9,876,543.21

You can see the exact output in the screenshot below:

This is perfect for US-based financial apps.

Check out TypeScript Check If String Is Number

Method 2: Regular Expressions for Custom Formatting

Sometimes, you might want more control or need to format numbers in a specific way. In those cases, a simple regular expression can help.

Example: Formatting a Population Number

Here is an example.

function addCommas(num: number): string {
  return num.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",");
}

const usPopulation = 331893745;
console.log(addCommas(usPopulation)); // Output: 331,893,745

Here is the exact output in the screenshot below:

Why use this method?

• Works well for custom formatting.
• Easy to use in utility functions.
• No dependency on browser locale settings.

Read Compare Dates in TypeScript

Method 3: Format Numbers in Arrays

Often, you’ll need to format an entire list of numbers, such as a dataset of US city populations.

const cityPopulations: number[] = [8419600, 3980400, 2716000]; // NYC, LA, Chicago

const formattedPopulations = cityPopulations.map(pop =>
  pop.toLocaleString('en-US')
);

console.log(formattedPopulations); // Output: [ '8,419,600', '3,980,400', '2,716,000' ]

This approach keeps your data readable throughout your app.

Check out TypeScript keyof with Strings

Method 4: Format Numbers in TypeScript with Decimal Points

If you need to control the number of decimal places, you can combine toLocaleString() with options.

const gdp: number = 27394.5678;
const formattedGDP = gdp.toLocaleString('en-US', {
  minimumFractionDigits: 2,
  maximumFractionDigits: 2,
});
console.log(formattedGDP); // Output: 27,394.57

Here is the exact output in the screenshot below:

Method 5: Create a TypeScript Utility Function

For larger projects, it’s helpful to create a reusable utility function.

export function formatNumberWithCommas(num: number, locale: string = 'en-US'): string {
  return num.toLocaleString(locale);
}

// Usage
console.log(formatNumberWithCommas(1500000)); // Output: 1,500,000

This keeps your code DRY (Don’t Repeat Yourself) and consistent.

In this tutorial, I explained how to format numbers with commas in TypeScript using methods such as using toLocaleString() and other methods.

I recommended:

• Use toLocaleString() for most use cases, especially when dealing with currency or internationalization.
• Use regex or custom functions if you need to support older browsers or have unique formatting requirements.
• Create utility functions for large projects to maintain consistency.

You may also like the following tutorials:

• Check If a Value Is in an Enum in TypeScript
• TypeScript Enum Reverse Mapping
• Add Property to Object in TypeScript