Converting a number to a string with commas in JavaScript

Reading Time: 2 minutes 🕑

Last updated: September 27, 2022.

Converting a number to a string with comma-formatting is about as easy as it can be in native JavaScript, thanks to the toLocaleString method for number data.

By applying toLocaleString, you can convert a number to a string with formatting appropriate to a user’s locale (e.g. commas as thousands separators). It is also possible to fix the output to a specific formatting (e.g. American-English).

Passing in an options object allows additional control over the output, such as outputting the number as a string with currency formatting or fixing the number of fraction digits.

Table of contents

Adding default number formatting

To convert a number to a string with commas (or other locale-specific formatting) in JavaScript, you can use the toLocaleString method:

const n = 4330957;
const nToPrint = n.toLocaleString();
console.log(nToPrint); // "4,330,957"

The nice thing about the toLocaleString method is that it is responsive to a user’s preferred language settings, as detected in their browser:

// If en-US is detected:
const n = 4330957;
const nToPrint = n.toLocaleString();
console.log(nToPrint); // "4,330,957"

// If de-DE is detected:
const n = 4330957;
const nToPrint = n.toLocaleString();
console.log(nToPrint); // "4.330.957"

// If en-IN is detected:
const n = 4330957;
const nToPrint = n.toLocaleString();
console.log(nToPrint); // "43,30,957"

Fix formatting to a locale

If you want to fix the output to a certain language and country format, pass in a valid ISO-639 language and ISO-3166 country code as a first argument:

const n = 4330957;
const nToPrint = n.toLocaleString('en-US');
console.log(nToPrint); // "4,330,957"

Mitch Fincher has very usefully compiled a list of valid language and country combinations on his homepage.

Fixing fraction digits

If you want to set a minimum or maximum number of fraction digits, you can specify this by passing in an options object in the second argument position:

const n = 4330957;
const nToPrint = n.toLocaleString(undefined, {minimumFractionDigits: 2, maximumFractionDigits: 2});
console.log(nToPrint); // "4,330,957.00"

To accept formatting to a user’s locale, pass in undefined as a first argument.

Adding currency formatting

You can also use the options object to specify that the output should be in currency format by providing the style and currency properties:

// Euros in default format:
const n = 4330957;
const nToPrint = n.toLocaleString(undefined, {style: 'currency', currency: 'EUR'});
console.log(nToPrint); // "€4,330,957.00"

// Yen in English-American format:
const n = 4330957;
const nToPrint = n.toLocaleString('en-US', {style: 'currency', currency: 'YEN'});
console.log(nToPrint); // "YEN 4,330,957.00"

// US Dollars in Arabic-Saudi Arabia format:
const n = 4330957;
const nToPrint = n.toLocaleString('ar-EG', {style: 'currency', currency: 'USD'});
console.log(nToPrint); // "٤٬٣٣٠٬٩٥٧٫٠٠ US$"

Summary

When applied to numeric data, the toLocaleString provides a process that is about as simple as it could be for converting a number to a string with appropriate formatting.

Additionally, it can adapt formatting to a user’s preferred language and output the number with special formatting, such as currency.

Related links