INTL JS API
Tags: javascript, programming, coding
Published: 2023-09-11 12:48:11




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](caption https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl#constructor_properties)![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/0yu71vqmoppzrgnlwq03.jpg) 


**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 is `en`
- 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 <u>positive for future times</u> or <u>negative for past times</u>.
- 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 used `undefined` 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 its `select()` 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.