Converting a number to a string with commas in JavaScript
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
- MDN Web Docs: Number.prototype.toLocaleString()
- Mitch Fincher: Country Code Language List