The new Intl object is the namespace for the ECMAScript Internationalization API which provides language-sensitive string comparison, number formatting, and date and time formatting in the locale-specific format.
Internationalization is the process of designing a product, application, or document content that is suitable for a global audience. It is a set of practices that allows a product to be adapted to different languages, cultures, and regions without engineering changes. The Intl object is a standard way to format data in the locale-specific format.
Why It's Needed
For decades, to make an application accessible natively in each region with the support of local elements like currency, timezone, and language-specific content developers had to use third-party libraries. The new Intl API trying to address the issue with the support of a few new features.
JavaScript being, a global language, and it's used by people all over the world. The Intl object is a standard way to format data in the locale-specific format. Previously, it was achieved by third-party libraries to format data in the locale-specific format, and the different operations required many different third-party libraries resulting in a bloated web and higher bundle sizes.
Date formatting was a major pain in the neck for developers. Because of this developers had to use third-party libraries like moment.js, date-fns, luxon, etc to format dates in the locale-specific format.
For formatting strings in the locale-specific format, developers had to use third-party client-side libraries like i18next, react-intl etc.
For formatting strings and numbers in the locale-specific format, developers had to use third-party libraries like numeral.js, accounting.js, cldr-compact-number, etc.
But now with the new Intl object, developers can format strings, numbers, and dates in the locale-specific format without using third-party libraries and standardizing the process of these.
The Intl API has excellent support for all major browsers except IE11. For IE11, you can use the Format.js Polyfil.
Each browser has a different implementation of the Intl object. So Output of the Intl object in different browsers might vary depending on the browser.
Intl API
Intl Object in Node v19.0.0
Intl object in Chrome 107.0
The Intl API provides many constructor properties for various tasks. We'll explore a few of them in this article. Later I, probably will add other remaining constructors.
Intl.Collator
Refrence: Intl.Collator
Constructor for collators, which are objects that enable language-sensitive string comparison.
Syntax
new Intl.Collator(locales, options);
locales: A string with a BCP 47 language tag, or an array of such strings. For the general form and interpretation of the locales argument, see
options: An object with some or all of the following properties:
const initialOptions = {
localeMatcher: 'best fit',
usage: 'sort',
sensitivity: 'variant',
ignorePunctuation: true,
numeric: true,
caseFirst: 'upper',
};
const collator = (
strOne,
strTwo,
language = 'en',
options = initialOptions
) => {
const collatorObject = new Intl.Collator(language, initialOptions);
return collatorObject.compare(strOne, strTwo);
};
const log = console.log;
log(collator('a', 'a', 'en'));
log(collator('a', 'A', 'en'));
log(collator('a', 'b', 'en'));
log(collator('b', 'a', 'en'));
log(collator('100', '10', 'en'));
log(collator('100', '1000', 'en'));
['Z', 'a', 'z', 'ä'].sort((acc, cur) => collator(acc, cur, 'de', {}));
Refrence: Intl.DateTimeFormat
Constructor for objects that enable the language-sensitive date and time formatting.
Syntax
new Intl.DateTimeFormat(locales, options);
locales: A string with a BCP 47 language tag, or an array of such strings. For the general form and interpretation of the locales argument, see
options: An object with some or all of the following properties:
const initialOptions = {
localeMatcher: 'best fit',
weekday: 'long',
era: 'long',
year: 'numeric',
month: 'long',
day: 'numeric',
hour: 'numeric',
minute: 'numeric',
second: 'numeric',
timeZoneName: 'long',
};
const dateTimeFormat = (
date = new Date(),
language = 'en',
options = initialOptions
) => {
const dateTimeFormatObject = new Intl.DateTimeFormat(language, options);
return dateTimeFormatObject.format(date);
};
const log = console.log;
log(dateTimeFormat(new Date(), 'en'));
log(dateTimeFormat(new Date(), 'de'));
log(dateTimeFormat(new Date(), 'fr'));
log(dateTimeFormat(new Date(), 'ja'));
log(dateTimeFormat(new Date(), 'zh'));
log(dateTimeFormat(new Date(), 'en', { weekday: 'short' }));
Refrence: Intl.RelativeTimeFormat
Constructor for objects that enable language-sensitive relative time formatting.
Syntax
new Intl.RelativeTimeFormat(locales, options);
locales : A string with a BCP 47 language tag, or an array of such strings. For the general form and interpretation of the locales argument, see
options: An object with some or all of the following properties:
const initialOptions = {
localeMatcher: 'best fit',
numeric: 'auto',
style: 'long',
};
const relativeTimeFormat = (
value = 0,
unit = 'second',
language = 'en',
options = initialOptions
) => {
const relativeTimeFormatObject = new Intl.RelativeTimeFormat(language, {
...options,
value,
unit,
});
return relativeTimeFormatObject.format(value, unit);
};
const log = console.log;
log(relativeTimeFormat(1));
log(relativeTimeFormat(0, 'month'));
log(relativeTimeFormat(-1, 'year'));
log(relativeTimeFormat(10, 'hour'));
log(relativeTimeFormat(5, 'day'));
log(relativeTimeFormat(1, 'week'));
log(relativeTimeFormat(1, 'month'));
log(relativeTimeFormat(1, 'day'));
log(relativeTimeFormat(-1, 'day'));
Refrence: Intl.NumberFormat
Constructor for objects that enable language-sensitive number formatting.
Syntax
new Intl.NumberFormat(locales, options);
locales: A string with a BCP 47 language tag, or an array of such strings. For the general form and interpretation of the locales argument, see
options: An object with some or all of the following properties:
Note: The style property can be either decimal or currency. If style is currency, then the currency property must be provided as well.
Note: The currencyDisplay property can be either symbol or code. If currencyDisplay is symbol, then the currency property must be provided as well.
Note : The notion property can be either standard or scientific. If notation is scientific, then the minimumSignificantDigits and maximumSignificantDigits properties must be provided as well. after which we can achieve the following:
const initialOptions = {
localeMatcher: 'best fit',
style: 'decimal',
currency: 'USD',
currencyDisplay: 'symbol',
compactDisplay: 'short',
useGrouping: true,
minimumIntegerDigits: 1,
minimumFractionDigits: 0,
maximumFractionDigits: 3,
minimumSignificantDigits: 1,
maximumSignificantDigits: 21,
notion: 'compact',
};
const numberFormat = (
number = 0,
language = 'en',
options = initialOptions
) => {
const numberFormatObject = new Intl.NumberFormat(language, options);
return numberFormatObject.format(number);
};
const log = console.log;
const numberFormatOptions = {
notation: 'compact',
compactDisplay: 'short',
};
log(numberFormat(12343232356.789, 'en', numberFormatOptions));
log(numberFormat(1000, 'en'));
log(numberFormat(1000, 'de'));
log(numberFormat(1000, 'in'));
log(numberFormat(1000, 'fr'));
log(numberFormat(1000, 'ja'));
log(numberFormat(1000, 'zh'));
log(numberFormat(1000, 'en', { style: 'currency', currency: 'EUR' }));
log(numberFormat(1000, 'de', { style: 'currency', currency: 'EUR' }));
log(numberFormat(1000, 'de', { style: 'currency', currency: 'INR' }));
log(numberFormat(1000, 'fr', { style: 'currency', currency: 'EUR' }));
log(numberFormat(1000, 'ja', { style: 'currency', currency: 'EUR' }));
log(numberFormat(1000, 'zh', { style: 'currency', currency: 'EUR' }));
log(numberFormat(1000, 'en', { style: 'percent' }));
log(numberFormat(1000, 'de', { style: 'percent' }));
log(numberFormat(1000, 'in', { style: 'percent' }));
log(numberFormat(1000, 'fr', { style: 'percent' }));
log(numberFormat(1000, 'ja', { style: 'percent' }));
log(numberFormat(1000, 'zh', { style: 'percent' }));
References
