The Intl API is very useful, but unfortunately I never thought of it at work. Use it quickly.

The Intl object is a namespace of the ECMAScript internationalization API that provides precise string comparison, number formatting, and date and time formatting.

Compatibility:

Intl objects are supported from IE11+ onwards, and some property methods are currently only supported in Chrome, such as ListFormat.

Console printing

Intl.Collator

The intl.collator object is the Collator’s constructor, an object used to enable language-sensitive string comparisons. It seems to be used a lot for internationalization

Case 1 – String numeric sorting

Options has the optional parameter numeric

['100'.'22'.'3'.'3d'].sort(new Intl.Collator(undefined, {numeric: true}).compare) // ["3", "3d", "22", "100"]
['100'.'22'.'3'.'d3d'.'D3d'].sort(new Intl.Collator(undefined, {numeric: true.caseFirst: 'upper'}).compare) // ["3", "22", "100", "D3d", "d3d"]
Copy the code

Case 2 – Chinese alphabetic sorting

['ah'."Ray".'good'.'z'].sort() // ["z", "ah "," ok ", "thunder "]
['ah'."Ray".'good'.'z'].sort(new Intl.Collator('zh').compare) // [" ah ", "ok "," thunder ", "z"]
Copy the code
new Intl.Collator('zh').compare('b'.'a') / / 1
new Intl.Collator('zh').compare('a'.'a') / / 0
new Intl.Collator('zh').compare('a'.'b') // -1
new Intl.Collator('en').compare('b'.'a') / / 1
new Intl.Collator('en').compare('a'.'a') / / 0
new Intl.Collator('en').compare('a'.'b') // -1
Copy the code

Intl.DateTimeFormat

Intl.DateTimeFormat is a constructor for an object that formats the date and time by language. The specified language date display looks similar to the following ones

Date.prototype.toLocaleString()
Date.prototype.toLocaleDateString()
Date.prototype.toLocaleTimeString()
Copy the code
new Intl.DateTimeFormat('zh', {
    year: 'numeric',  
    month: '2-digit',
    day: '2-digit',
    hour: '2-digit',
    minute: '2-digit',
    second: '2-digit',
    hour12: false
}).format(new Date()) // 2021/06/22 11:05:57

new Intl.DateTimeFormat('en-US', options).format(new Date()) // Tuesday, June 22, 2021
Copy the code

Intl.ListFormat

Intl.ListFormat is a language-specific list formatting constructor.

const vehicles = ['Motorcycle'.'Bus'.'Car'];
new Intl.ListFormat('en', { style: 'long'.type: 'conjunction' }).format(vehicles) // "Motorcycle, Bus, and Car"
new Intl.ListFormat('zh', { style: 'long'.type: 'conjunction' }).format(vehicles) // "Motorcycle, Bus, Car"
Copy the code

Well, I don’t know where I can use… new Intl.RelativeTimeFormat(‘zh’).format(1, ‘day’)

Intl.NumberFormat

Intl.NumberFormat is a language-sensitive constructor class for formatting number classes

Case 1 – Money handling

new Intl.NumberFormat().format(10000000) // 10,000,000 ⭐️
// German uses a comma as a decimal point. As a thousand separator
new Intl.NumberFormat('de').format(10000000) / / "10.000.000 total"
// You can also bring the corresponding international money unit...
new Intl.NumberFormat('zh', {
    style: 'currency'.currency: "CNY"
}).format(12312312) / / "selections 12312312.00"
Copy the code

Intl.NumberFormat

Object constructor for multiple language rules. There is no localized RelativeTimeFormat enabled with the intl. RelativeTimeFormat object

new Intl.RelativeTimeFormat('zh').format(1.'day') // "1 day later"
Copy the code

MDN Intl link

reference