Front-end internationalization tool – Intl

How does the new Intl object format data into a specific language

New Intl APIs in JavaScript

Intl is a global object whose main purpose is to display internationalization information, converting strings, numbers, and dates and times to a locale format.

Internationalization is a way for an application to accommodate a variety of languages and regions without coding.

JavaScript developers don’t need to add kilobytes of translation files to their code packages. Intl has various constructors and methods that take locale as an argument and format the data according to your needs. Here’s what Intl is made of:

Collator, DateTimeFormat, ListFormat, NumberFormat, PluralRules, RelativeTimeFormat are constructors in the Intl namespace. They take two arguments – locales and options. Locale must be a string or array that complies with the BCP 47 language markup specification. If you are interested in learning more about the BCP 47 language label, please refer to the excerpt from MDN:

The BCP 47 language tag is used to define a language and contains the main information for that language. Normally, it contains the order: language code, script code, and country or region code, all separated by a hyphen. Although these tags are case insensitive, it is recommended to write script code in title case, country and region codes in upper case, and other content in lower case.

The default value of the locale parameter is the runtime locale. The language context is usually written as -en (English), hi (Hindi), ta-in (Tamil – Indian). The options argument is optional, its structure varies from constructor to constructor, and is mainly used to provide formatted custom arguments.

In this article, we’ll look at some of the new apis added to the Intl namespace. These new apis have been announced in Google I/O ’19. Let’s take a closer look at these apis.

Intl.RelativeTimeFormat

The RelativeTimeFormat constructor is used to convert the timestamp to a human phrase. It converts an unreadable date object to its relative current time string. Let’s take a look at this chestnut:

In the chestnut above, the intl. RelativeTimeFormat constructor takes the first argument to en. Options in numeric may take the value always or auto —-, where always does not format numbers into phrases, for example:

Rtf.format (-1, ‘month’) will format to 1 month ago.

If you want to format them in Thai, you can pass the parameters as shown below:

Phrases like yesterday, today, tomorrow can provide better readability for the user! Related functions are available in Chrome 71 and FireFox 65 or later.

Intl.ListFormat

The ListFormat constructor is used to concatenate strings into meaningful phrases.

The format method concatenates strings in the Characters array nicely. Without using the ListFormat API, we would have to write functions to insert, and and in the appropriate places.

We can customize the formatted content by changing the configuration item in options:

Setting type to disjunction uses OR to concatenate strings. Here are some optional values for the properties of options:

Type: The optional values are conjunction, disjunction, or unit, where conjunction is the default and the unit type is used when a conjunction is not required, as shown below:

Style: The optional value is long and short (or narrow)

The ListFormat API is available in Chrome 72 or later.

Intl.NumberFormat

Unlike other high-level languages, JavaScript provides flexibility in the data types of variables. Int, float, String, or object are all declared using var (let and const for block-level scope).

But how do we determine how big a number is?

123456789123456789 * 11 // Prints 1358024680358024700
Copy the code

The unit of the result of the above operation should not be 0! It looks like we need to do something extra for large numbers. The good news is that we already have BigInt for handling large numbers. Let’s try it again using BigInt:

123456789123456789n * 11n // Prints 1358024680358024679n
Copy the code

It looks so much more normal now!

Large numbers are generally less readable. In this case we may need to use the INTl.NumberFormat API! It is used to format numbers by adding locale-specific number delimiters. Let’s see how it works:

The number formatting will vary depending on your locale. Use comma delimiters when set to en and Spaces when set to fr.

We can customize the formatted content by changing the configuration items in the Options object. Options Have the following optional values:

Style: The optional values are decimal, currency, and percent, and the default is decimal

Currency: Used to specify a currency style. For example, USD, INR

CurrencyDisplay: The optional value is symbol and code, and the default value is symbol

You can click here to see all the configurable items.

Intl.NumberFormat is now available in Chrome, FireFox and Safari.

There is an even more exciting API on the list: Intl.dateTimeFormat

Intl.DateTimeFormat

The Intl.DateTimeFormat API is used to format dates and times into the format of the specified language. The new method formatRange on this API can be used as follows:

const df = new Intl.DateTimeFormat('en', {
    year: 'numeric',
    month: 'short',
    day: 'numeric'
})
const startDate = new Date('01-06-2019')
const endDate = new Date('10-06-2019')
df.formatRange(startDate, endDate) // Prints Jun 1-10 2019
Copy the code

Note: The formatRange function displays the dates of the same month together.

Using this API, you can remove methods from your code that are only used to format date ranges!

Options has many configuration items, such as timeZone, ERA, year, Month, day, hour, minute, second, and so on.

conclusion

This article introduces some of the new API Intl:

1. The Intl. The timestamp RelativeTimeFormat API can be used to generate relative to the current time human phrases.

2. The Intl.ListFormat API can be used to join array elements into phrases using the conjunctions, disjunction, and unit parameters.

3.Intl.NumberFormat can be used to format large numbers into the specified language format.

4. The formatRange method on the Intl.dateTimeFormat API can be used to generate time-range strings.

Welcome to reprint, remember to indicate the author and source oh ~~