back

cover image

Manage Numbers in Your App Using the JavaScript "Intl" API

A Comprehensive Guide to Number Formatting with Intl.NumberFormat

In this tutorial, we'll explore the powerful JavaScript "Intl" API to handle number formatting in your applications 🚀. Whether you're building a social media platform, analytics dashboard, or any data-driven application, proper number formatting is crucial for user experience.

Even though this is a React-based tutorial, the Intl API concepts are framework-agnostic. This article is valuable for any JavaScript developer, regardless of their framework preference.

Why Number Formatting Matters

Numbers are everywhere in modern web applications. You've likely seen social media platforms using formatted numbers like:

  • 256K for views
  • 2.6M for followers
  • 1.2B for total users

While you might think you need complex conditions or external packages for such formatting, the built-in JavaScript Intl API makes this incredibly simple!

Understanding the Intl API

The Intl namespace is part of the ECMAScript Internationalization API, providing powerful tools for:

  • Language-sensitive string comparison
  • Number formatting
  • Date and time formatting
  • Currency formatting
  • List formatting

In this guide, we'll focus specifically on number formatting using Intl.NumberFormat().

Project Setup

Let's create a React project to demonstrate the Intl API in action. Run these commands in your terminal:

npx create-react-app my-app
cd my-app
npm start

Deep Dive into Intl.NumberFormat

The Intl.NumberFormat() constructor creates objects that enable language-sensitive number formatting.

Basic Syntax

new Intl.NumberFormat()
new Intl.NumberFormat(locales)
new Intl.NumberFormat(locales, options)

Creating a Number Formatter

Here's how to create a basic number formatter:

const formatter = Intl.NumberFormat("en", { notation: "compact" })

Key parameters:

  • "en": The locale (language and region)
  • { notation: "compact" }: Formatting options

Using the Formatter

The formatter's format() method takes a number and returns a formatted string:

formatter.format(5000)    // "5K"
formatter.format(55060)   // "55K"
formatter.format(5506034) // "5.5M"

Building a React Demo App

Let's create a practical example that demonstrates number formatting in a React application.

Implementation

import { useState, useRef } from "react";

function App() {
  const [views, setViews] = useState(0);
  const formatter = useRef(Intl.NumberFormat("en", { notation: "compact" }));

  return (
    <div>
      <input
        type="number"
        value={views}
        onChange={(e) => setViews(parseInt(e.target.value))}
      />

      <h1>{formatter.current.format(views)}</h1>
    </div>
  );
}

export default App;

How It Works

  1. We use useState to manage the view count
  2. useRef maintains the formatter instance across renders
  3. The UI includes:
    • An input field for view count
    • A heading that displays the formatted number

Additional Formatting Options

The Intl.NumberFormat API offers many more options:

// Currency formatting
const currencyFormatter = Intl.NumberFormat("en-US", {
  style: "currency",
  currency: "USD"
});

// Percentage formatting
const percentFormatter = Intl.NumberFormat("en-US", {
  style: "percent",
  minimumFractionDigits: 2
});

// Unit formatting
const unitFormatter = Intl.NumberFormat("en-US", {
  style: "unit",
  unit: "kilometer"
});

Best Practices

  1. Locale Selection: Choose appropriate locales for your target audience
  2. Performance: Reuse formatter instances when possible
  3. Fallbacks: Always provide fallback formatting for unsupported browsers
  4. Accessibility: Consider screen readers when formatting numbers

Browser Support

The Intl API is well-supported across modern browsers. For older browsers, consider using polyfills like Intl.js.

Conclusion

The ECMAScript Intl API provides a robust, native solution for number formatting in JavaScript applications. By using Intl.NumberFormat, you can:

  • Format numbers according to locale conventions
  • Display compact notations (K, M, B)
  • Format currencies and units
  • Ensure consistent number formatting across your application

This built-in solution eliminates the need for external libraries in most cases and provides excellent internationalization support out of the box.

Further Reading