🔢 Number Formats Across Different Countries

When building a web application that is used across different countries, it is important to display numbers in a format that is familiar to the user. Different countries use different number formats, including different decimal separators, thousands separators, and digit grouping patterns. For example, in the United States, the decimal separator is a period (.), and the thousands separator is a comma (,), while in many European countries, the decimal separator is a comma (,) and the thousands separator is a period (.).

🌍 Number Formats Across Different Countries

Let's take a look at how numbers are formatted in some common countries:

• United States: 1,234.56
• United Kingdom: 1,234.56
• Germany: 1.234,56
• France: 1 234,56
• Japan: 1,234.56

GIF

🧰 Creating a Number Formatting Utility

We can create a utility function that takes a number and a country code as input and returns the number formatted in the correct format for that country. Here's an example of what that function could look like:

function formatNumber(number, countryCode) {
  return new Intl.NumberFormat(countryCode, {
    style: 'decimal',
    minimumFractionDigits: 2,
    maximumFractionDigits: 2,
  }).format(number);
}

This function takes two arguments: the number to format and the country code of the country for which we want to format the number. It uses the Intl.NumberFormat constructor to create a number formatter with the correct options for that country, and then formats the number using the format() method of the formatter.

🖥️ Example

Let's say we have a React component that displays a number input and allows the user to select a country from a dropdown menu. We can use our formatNumber function to format the number input based on the selected country. Here's an example of what that component could look like:

import { useState } from 'react';

function NumberInput() {
  const [number, setNumber] = useState(0);
  const [countryCode, setCountryCode] = useState('US');

  const handleNumberChange = (event) => {
    setNumber(Number(event.target.value));
  };

  const handleCountryChange = (event) => {
    setCountryCode(event.target.value);
  };

  const formattedNumber = formatNumber(number, countryCode);

  return (
    <div>
      <label>
        Number:
        <input type="number" value={number} onChange={handleNumberChange} />
      </label>
      <label>
        Country:
        <select value={countryCode} onChange={handleCountryChange}>
          <option value="US">United States</option>
          <option value="GB">United Kingdom</option>
          <option value="DE">Germany</option>
          <option value="FR">France</option>
          <option value="JP">Japan</option>
        </select>
      </label>
      <p>Formatted Number: {formattedNumber}</p>
    </div>
  );
}

🎉 Congratulations, you have now learned how to handle number formats in JavaScript using the Intl API.

Here is the stackblitz: https://stackblitz.com/edit/react-ts-fb9fhx?file=App.tsx