JavaScript Internationalization: A Complete Guide to `toLocaleString`

Language-Sensitive Formatting in JavaScript: A Comprehensive Guide

In today’s globalized world, it’s essential to consider the diversity of languages and cultures when developing web applications. JavaScript provides a convenient way to format dates, numbers, times, currencies, and data structures in a language-sensitive manner using the toLocaleString method. In this article, we’ll delve into the details of using toLocaleString with various data types, including numbers, dates, and arrays.

Understanding the toLocaleString Method

The toLocaleString method takes two optional arguments: locales and options. The locales argument is a string or an array of strings representing the BCP 47 language tag, while the options argument is an object that customizes the behavior of the method.

Using toLocaleString with Numbers

You can use toLocaleString to format numbers in a language-sensitive way. For example, you can format numbers as currencies, append units, or display percentages.

• Formatting Currencies

  To format numbers as currencies, set the style property of the options object to "currency" and specify the currency code using the currency property.

  javascript
const amount = 1234.56;
console.log(amount.toLocaleString('en-US', { style: 'currency', currency: 'USD' })); // Output: $1,234.56


• Formatting Numbers in Scientific and Engineering Notation

  You can express numbers in scientific and engineering notation by setting the notation property of the options object to "scientific", "engineering", or "compact".

  javascript
const num = 1234567.89;
console.log(num.toLocaleString('en-US', { notation: 'scientific' })); // Output: 1.234568e+6


• Formatting Units

  To append units to numbers, set the style property of the options object to "unit" and specify the unit using the unit property.

  javascript
const length = 10;
console.log(length.toLocaleString('en-US', { style: 'unit', unit: 'meter' })); // Output: 10 meters


Using toLocaleString with Dates and Times

You can use toLocaleString to format dates and times in a language-sensitive way. The method takes into account the locale’s conventions for date and time formatting.

• Formatting Dates

  To format dates, set the year, month, and day properties of the options object.

  javascript
const date = new Date('2022-07-25');
console.log(date.toLocaleString('en-US', { year: 'numeric', month: 'long', day: 'numeric' })); // Output: July 25, 2022


• Formatting Times

  To format times, set the hour, minute, and second properties of the options object.

  javascript
const time = new Date('2022-07-25T14:30:00');
console.log(time.toLocaleString('en-US', { hour: 'numeric', minute: 'numeric', second: 'numeric' })); // Output: 2:30:00 PM


Using toLocaleString with Arrays

You can use toLocaleString to format arrays of numbers or dates in a language-sensitive way.

const numbers = [1, 2, 3, 4, 5];
console.log(numbers.toLocaleString('en-US')); // Output: 1, 2, 3, 4, 5

const dates = [new Date('2022-01-01'), new Date('2022-02-01'), new Date('2022-03-01')];
console.log(dates.toLocaleString('en-US')); // Output: 1/1/2022, 2/1/2022, 3/1/2022

Introduction to the Intl Interface

The Intl interface provides a more comprehensive way to format numbers, dates, and times in a language-sensitive way. It includes constructors such as Intl.NumberFormat and Intl.DateTimeFormat that allow you to customize the formatting process.

const numberFormat = new Intl.NumberFormat('en-US', { style: 'currency', currency: 'USD' });
console.log(numberFormat.format(1234.56)); // Output: $1,234.56

const dateTimeFormat = new Intl.DateTimeFormat('en-US', { year: 'numeric', month: 'long', day: 'numeric' });
console.log(dateTimeFormat.format(new Date('2022-07-25'))); // Output: July 25, 2022