JavaScript国际化

了解如何使用JavaScript进行国际化

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属性:

国际整理者

此属性使您可以访问对语言敏感的字符串比较

您使用以下方法初始化Collator对象new Intl.Collator(),将其传递给语言环境,然后您就可以使用它了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(),将其传递给一个语言环境,然后为它传递一个日期以按照该语言环境的要求对其进行格式化:

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上

国际编号格式

此属性使您可以访问对语言敏感的数字格式。您可以使用它来格式化数字作为货币值。

假设您有一个类似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'
})

国际规则

此属性使您可以访问对语言敏感的复数格式和复数语言规则。我发现Mathias Bynens在Google Developers门户上的示例我唯一可以涉及到的实际用法是:给有序数字加上后缀: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中提供。

免费下载我的JavaScript初学者手册


更多js教程: