Formatting numbers using the notation parameter in Intl.NumberFormat

Photo By Bernard Hermant on Unsplash

Formatting numbers is essential when dealing with large datasets, financial figures, or localized content. The Intl.NumberFormat API in JavaScript is a powerful tool for formatting numbers based on specific ¹locales and options, and one of its valuable features is the notation parameter.

What is Intl.NumberFormat?

Intl.NumberFormat is part of the Internationalization API (Intl), which provides language-sensitive string comparison, number formatting, and date and time formatting. Intl.NumberFormat is specifically used for formatting numbers, making it easy to display them in a readable and localized way.

const { format } = new Intl.NumberFormat('en-US');

console.log(format(1234567.89)); // Output: "1,234,567.89"

In this example, Intl.NumberFormat formats the number 1234567.89 using the en-US locale, adding commas as thousands separators and a period as the decimal separator.

The notation Parameter

The notation parameter in Intl.NumberFormat specifies how numbers should be formatted, particularly when dealing with large or small numbers. It offers four main options:

1. Standard (default)

2. Compact

3. Scientific

4. Engineering

Each notation option in more detail —

1. Standard Notation

   This is the default format, which displays the number without any special adjustments.

   Passing in a number formats the number to a more readable format separated by commas (or decimals — depending on your preferred locale). In the code example below, the locale is “en-US“:

   const { format } = new Intl.NumberFormat('en-US', { notation: 'standard' });
   
   console.log(format(1234567)); // Output: "1,234,567"

   Here, 1234567 is formatted to 1,234,567 using standard notation with a short style.

2. Compact Notation

   Compact notation shortens numbers for readability by using abbreviations, such as "K" for thousands, "M" for millions, or "B" for billions. This format is great for displaying figures in charts, summaries, or dashboards.

   Shorter Version:

   const { format } = new Intl.NumberFormat('en-US', { notation: 'compact' });
   
   console.log(format(1234567)); // Output: "1.2M"

   Here, 1234567 is shortened to 1.2M using compact notation with a short style.

   Longer Version:

   const { format } = new Intl.NumberFormat('en-US', { notation: 'compact', compactDisplay: 'long' });
   
   console.log(format(1234567)); // Output: "1.2 million"

   In this example, the output is 1.2 million using the long style for compact notation.

3. Scientific Notation

   This expresses numbers as a product of a number between 1 and 10 and a power of 10. This format is especially useful when dealing with very large or very small numbers.

   const { format } = new Intl.NumberFormat('en-US', { notation: 'scientific' }); 
   
   console.log(format(1000)); // Output: "1E3"

   Here 1000 is represented as 1E3, which means 1 x 10^3, and equals 1,000. This is the scientific notation format.

4. Engineering Notation

   This notation is similar to scientific notation, but the exponent is always a multiple of 3, making it more suitable for engineering applications.

   I personally find this somewhat more readable, compared to the scientific notation.

   const { format } = new Intl.NumberFormat('en-US', { notation: 'engineering' }); 
   
   console.log(format(1000)); // Output: "1E3"}

   In the example above, the output is the same as in scientific notation because 1000 falls perfectly into a multiple of three for its exponent.

   const { format } = new Intl.NumberFormat('en-US', { notation: 'engineering' }); 
   
   console.log(format(10000)); // Output: "10E3"
   

   Here, the difference becomes more apparent since the exponent doesn’t fall into a multiple of 3.

Combining notation with Other Options

The Intl.NumberFormat API is highly customizable. You can combine the notation parameter with other options, such as style, currency, or unit, to achieve even more specialized formatting.

Example: Compact Notation with Currency

const options = { 
  style: 'currency', 
  currency: 'USD', 
  notation: 'compact', 
  compactDisplay: 'short' 
}

const { format } = new Intl.NumberFormat('en-US', options); 

console.log(format(1234567)); // Output: "$1.2M"

In this example, we use compact notation in combination with the currency style to format a large value in US dollars.

Conclusion

The notation parameter in Intl.NumberFormat provides flexibility for formatting numbers in different styles, making it easier to present large or small values in a readable and user-friendly way.

Whether you're building dashboards, rendering data in tables, financial applications, or scientific tools, mastering Intl.NumberFormat will help you deliver a better user experience.

1. A locale refers to a set of parameters that define a user’s language, country and any “location“ preferences. These settings are used in software to display information such as numbers, dates, times, and text in a way that is familiar and appropriate with a particular region or language.