JavaScript的`Intl` 对象的实例介绍

438 阅读3分钟

Intl 是一个强大的对象,暴露了JavaScript国际化API

它暴露了以下属性。

  • Intl.Collator:使你能够访问对语言敏感的字符串比较
  • Intl.DateTimeFormat:让你可以访问对语言敏感的日期和时间格式化
  • Intl.NumberFormat:让你可以访问对语言敏感的数字格式化
  • Intl.PluralRules: 可以访问对语言敏感的复数格式和复数语言规则
  • Intl.RelativeTimeFormat允许你访问对语言敏感的相对时间格式化。

它还提供了一个方法:Intl.getCanonicalLocales()

Intl.getCanonicalLocales() 让你检查一个地区是否有效,并返回它的正确格式。它可以接受一个字符串,或者一个数组。

Intl.getCanonicalLocales('it-it') //[ 'it-IT' ]
Intl.getCanonicalLocales(['en-us', 'en-gb']) //[ 'en-US', 'en-GB' ]

如果语言无效,则抛出一个错误。

Intl.getCanonicalLocales('it_it') //RangeError: Invalid language tag: it_it

你可以用一个 try/catch 块来捕获这个错误。

不同的类型可以根据他们的具体需要与Intl API接口。特别是我们可以提到。

  • String.prototype.localeCompare()
  • Number.prototype.toLocaleString()
  • Date.prototype.toLocaleString()
  • Date.prototype.toLocaleDateString()
  • Date.prototype.toLocaleTimeString()

让我们来看看如何使用上述Intl属性。

Intl.Collator

这个属性可以让你访问对语言敏感的字符串比较。

你使用new Intl.Collator() 来初始化一个Collator对象,传递给它一个locale,然后你使用它的compare() 方法,如果第一个参数在第二个参数之后,则返回一个正值。如果是相反的,则为负值,如果是相同的值,则为零。

const collator = new Intl.Collator('it-IT')
collator.compare('a', 'c') //a negative value
collator.compare('c', 'b') //a positive value

我们可以用它来排列字符数组,例如。

国际刑警组织.DateTimeFormat

这个属性让你可以访问对语言敏感的日期和时间格式化。

你使用new Intl.DateTimeFormat() 初始化一个 DateTimeFormat 对象,传递给它一个 locale,然后你传递给它一个日期,让它按照该 locale 的偏好进行格式化。

const date = new Date()
let dateTimeFormatter = new Intl.DateTimeFormat('it-IT')
dateTimeFormatter.format(date) //27/1/2019
dateTimeFormatter = new Intl.DateTimeFormat('en-GB')
dateTimeFormatter.format(date) //27/01/2019
dateTimeFormatter = new Intl.DateTimeFormat('en-US')
dateTimeFormatter.format(date) //1/27/2019

formatToParts()方法返回一个包含所有日期部分的数组。

const date = new Date()
const dateTimeFormatter = new Intl.DateTimeFormat('en-US')
dateTimeFormatter.formatToParts(date)
/*
[ { type: 'month', value: '1' },
  { type: 'literal', value: '/' },
  { type: 'day', value: '27' },
  { type: 'literal', value: '/' },
  { type: 'year', value: '2019' } ]
*/

你也可以打印时间。在MDN上查看你可以使用的所有选项。

International.NumberFormat

这个属性让你可以访问对语言敏感的数字格式化。你可以用它来把一个数字格式化为货币值。

假设你有一个数字,如 10,它代表某样东西的价格。

你想把它转换为 $10,00.

如果这个数字有3位以上的数字,那么它应该以不同的方式显示,例如:, **1000**应该被显示为 $1.000,00

然而,这是以美元为单位的。

不同的国家有不同的惯例来显示数值

JavaScript为我们提供了非常简单的方法。 ECMAScript国际化API,这是一个比较新的浏览器API,提供了很多国际化的功能,比如日期和时间的格式化。

它的支持度很高。

Browser support for the internationalization API

const formatter = new Intl.NumberFormat('en-US', {
  style: 'currency',
  currency: 'USD',
  minimumFractionDigits: 2
})

formatter.format(1000) // "$1,000.00"
formatter.format(10) // "$10.00"
formatter.format(123233000) // "$123,233,000.00"

minimumFractionDigits 属性将分数部分设置为总是至少2位数。你可以在NumberFormat MDN页面中查看你可以使用哪些其他参数。

这个例子为意大利国家创建了一个欧元货币的数字格式。

const formatter = new Intl.NumberFormat('it-IT', {
  style: 'currency',
  currency: 'EUR'
})

国际.复数规则

这个属性让你可以访问对语言敏感的复数格式化和复数语言规则。我发现Google开发者门户上Mathias Bynens的例子是唯一一个我可以与实际使用联系起来的例子:给有序数字加上后缀。0th, 1st, 2nd, 3rd, 4th, 5th...。

const pr = new Intl.PluralRules('en-US', {
    type: 'ordinal'
})
pr.select(0) //other
pr.select(1) //one
pr.select(2) //two
pr.select(3) //few
pr.select(4) //other
pr.select(10) //other
pr.select(22) //two

每次我们得到other ,我们就把它翻译成th 。如果我们有one ,我们就用st 。对于two ,我们使用ndfew 得到rd

我们可以使用一个对象来创建一个关联数组。

const suffixes = {
  'one': 'st',
  'two': 'nd',
  'few': 'rd',
  'other': 'th'
}

并且我们做一个格式化函数来引用对象中的值,并且我们返回一个包含原始数字及其后缀的字符串。

const format = (number) => `${number}${suffixes[pr.select(number)]}`

现在我们可以像这样使用它。

format(0) //0th
format(1) //1st
format(2) //2nd
format(3) //3rd
format(4) //4th
format(21) //21st
format(22) //22nd

请注意,Intl即将出现一些好东西,如 Intl.RelativeTimeFormatIntl.ListFormat,在撰写本文时,这些功能只在Chrome和Opera中可用。