As an application begins to increase in adoption, it becomes important to personalize user experience across different timezone and localities.
JavaScript is here to assist with language and region differences, such as Unicode support, customizing interfaces for various alphabets, and sorting non-English text.
You can do that all with JavaScript's Intl API features, no need for external libraries, it will enhance user experience but also trim down your app's JavaScript payload, leading to faster load times and efficiency gains
Let's Gets Started
The Intl object provides access to several constructors, like
DateTimeFormat
RelativeTimeFormat
NumberFormat
Collator
ListFormat
PluralRules
see the documentation here
Formatting Date and Time
Let's start by formatting dates and times
const formattedDateTime = new Intl.DateTimeFormat('en');
console.log(formattedDateTime.format(new Date()));
Output
9/8/2023
- The
DateTimeFormat
object can be used to format dates and times in different locales, in this code we use English format which isen
- It will return the current date and time in the English format
If you want use the default locale provided by the user's environment (usually based on your operating system or browser settings) you can use undefined
const formattedDateTime = new Intl.DateTimeFormat(undefined, {dateStyle: "short"});
console.log(formattedDateTime.format(new Date()));
Output :
9/8/23
- Not also we can use the default local, we can also specify the formatting options using
dateStyle
property. - We set the format to
short
, which means we want a short date format.
Display Time Interval
when you want to display time intervals in a way that is more human-readable and context-aware you can use RelativeTimeFormat
const formatter = new Intl.RelativeTimeFormat(undefined);
console.log(formatter.format(5, "hour");
Output :
in 5 hour
- The
RelativeTimeFormat
object takes two arguments in its format method - The first argument is the numeric value representing the time interval. It can be positive for future times or negative for past times.
- The second argument is a string specifying the time unit, such as 'year', 'month', 'week', 'day', 'hour', 'minute', 'second', etc.
Formatting Number
NumberFormat
is used to control how number are displayed, including formatting them with the appropriate symbols, decimal separators, and thousands separators for a given locale.
const formatter = new Intl.NumberFormat('ja-JP', {
currency: "JPY",
style: "currency",
});
console.log(formatter.format(18000));
Output :
¥18,000
- With
NumberFormat
we can also display a number as a currency - 'ja-JP' is used as the locale parameter. This explicitly sets the locale to Japanese (Japan).
-
{ currency: "JPY", style: "currency" }
is an options object that specifies how the number should be formatted. It indicates that the number should be formatted as a currency and that the currency symbol should be "JPY" for Japanese Yen.
Plural Rules
Different languages have different rules for plurals (e.g., singular, plural, dual), and PluralRules
helps you format numbers accordingly.
const formatter = new Intl.PluralRules(undefined);
console.log(formatter.select(3));
Output :
other
- To use
Intl.PluralRules
, we need to create an instance of it, specifying the desired locale (or using the default locale) as a parameter. In this example, i have usedundefined
as the locale parameter, which means it will use the default locale of the user's browser or system. - Once we have a
PluralRules
object, we can use itsselect()
method to determine the plural form for a given number. This method takes a number as an argument and returns the corresponding plural category - The output 'other' indicates that, in my country, the number
3
belongs to the 'other' plural category
Overall, Intl.PluralRules
is useful when you need to handle pluralization in a localized manner in your JavaScript applications. It allows you to adapt the formatting of numbers based on the rules of the target language or locale, ensuring that your application's content is grammatically correct and culturally appropriate.
CONCLUSION
The Intl JavaScript API emerges as a powerful ally, bridging language gaps and fostering global connectivity. With its ability to seamlessly handle everything from date and time formatting to currency conversion and beyond, Intl
empowers developers to create applications that speak the language of their users.
Top comments (0)