Back to all snippets
Library/JavaScript/Format Number
javascriptbeginnerformattingnumbersutilities

How to implement Format Number in Javascript

Format numbers with commas and decimal places using the Intl API

Quick Answer

Use Intl.NumberFormat to format numbers with thousands separators and a fixed number of decimal places in a locale-aware way — no external libraries required.

Code Snippet

1function formatNumber(num, decimals = 2) {
2  return new Intl.NumberFormat('en-US', {
3    minimumFractionDigits: decimals,
4    maximumFractionDigits: decimals
5  }).format(num);
6}

What is Format Number?

The Intl.NumberFormat API provides powerful number formatting capabilities including thousands separators, decimal places, and locale-specific formatting. This is essential for displaying prices, statistics, and any numerical data in a user-friendly format.

How It Works

  1. 1Intl.NumberFormat is constructed with a locale string and an options object.
  2. 2minimumFractionDigits pads with trailing zeros if needed.
  3. 3maximumFractionDigits caps the number of decimal places.
  4. 4The .format() method returns a locale-aware formatted string.

Common Use Cases

  • Price display — format currency values with proper decimals
  • Statistics — show large numbers with comma separators
  • Financial data — display percentages and monetary values
  • Reports — format numbers for data visualisation

Key Benefits

  • Native browser API — no dependencies
  • Locale-aware formatting
  • Customisable decimal places
  • Handles all number magnitudes correctly

Common Mistakes to Avoid

  • Hardcoding 'en-US' — use navigator.language on the client to match the user's locale.
  • Forgetting that formatNumber returns a string — parse it back to a number before calculations.
  • Using toLocaleString() directly — Intl.NumberFormat is faster when formatting many values.

Quick Tips

  • Click the "Copy" button above to copy the code to your clipboard
  • This code is production-ready and can be used in your projects immediately
  • Check out related snippets below for more javascript examples

Frequently Asked Questions

How do I format a number as currency in JavaScript?

Pass style: 'currency' and currency: 'USD' (or your currency code) to Intl.NumberFormat options.

Does Intl.NumberFormat work in all browsers?

Yes. It is supported in all modern browsers and Node.js since v0.12.

How do I format a percentage?

Use style: 'percent' in the options. The input should be a fraction, e.g. 0.85 formats as '85%'.

Related Snippets

javascript
beginner
Sleep Function
Pause execution for a specified number of milliseconds using async/await
asyncutilitiestiming
javascript
intermediate
Local Storage Helper
Type-safe localStorage wrapper with JSON support and error handling
storageutilitiesbrowser

About This Javascript Code Snippet

This free javascript code snippet for format number is production-ready and copy-paste friendly. Whether you are building a web app, API, or frontend interface, this beginner-level example will help you implement format number quickly and correctly.

All snippets in the Snippetly library follow javascript best practices and are tested for real-world use. You can adapt this code to work with React, Vue, Node.js, or any project that uses javascript.

Tags: formatting, numbers, utilities  | Language: javascript  | Difficulty: beginner  | Category: JavaScript

Build Your Own Snippet Library

Organise your team's code snippets with Snippetly. Share knowledge and boost productivity across your organisation.

Get Started FreeBrowse More Snippets