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,提供了很多国际化的功能,比如日期和时间的格式化。
它的支持度很高。
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
,我们使用nd
。few
得到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.RelativeTimeFormat
和 Intl.ListFormat
,在撰写本文时,这些功能只在Chrome和Opera中可用。