JS Intl API Examples - Dependency Free Formatting

The JS Intl API, available since 2017, provides dependency-free date, number, and relative time formatting options within the browser. This allows developers to eliminate the need for external libraries like moment.js, improving performance and simplifying development, especially for internationalized applications needing localized date and number displays.

Date Formatting

• 00:00:54 The Intl.DateTimeFormat API can be used to format dates based on user's preferred language settings in their web browser. It requires passing in a date and formatter options, which automatically adjusts the format based on the locale. This ensures dates are displayed in the most user-friendly way regardless of language, including different order of elements.

Number Formatting

• 00:02:16 Intl.NumberFormat API formats numbers according to the user's locale, including automatically abbreviating large numbers with units like 'K' for thousands or 'M' for millions. It supports different number notations, such as 'compact' for abbreviation and 'standard' for displaying the full number with locale-specific separators, like commas or periods.

Relative Time Formatting

• 00:03:31 Intl.RelativeTimeFormat is used for displaying relative time (e.g., '2 days ago', '18 hours ago'). It requires a number and a unit (e.g., 'days', 'hours') to be passed into the formatter. While simple to use, it requires calculating the time difference between the current time and the date to be displayed and determining the relevant unit, making it slightly less straightforward than the other formatters.

Browser Support

• 00:05:42 Intl.DateTimeFormat and Intl.NumberFormat have wide browser support, including IE11, while Intl.RelativeTimeFormat has more limited support, excluding IE11. The APIs generally are well-supported by modern browsers, making it feasible to implement them in a variety of web applications.