javascript国际化
Intl
is a powerful object that exposes the JavaScript Internationalization API.
Intl
是一个功能强大的对象,它公开了JavaScript国际化API 。
It exposes the following properties:
它公开了以下属性:
Intl.Collator
: gives you access to language-sensitive string comparison
Intl.Collator
:使您可以访问语言敏感的字符串比较
Intl.DateTimeFormat
: gives you access to language-sensitive date and time formatting
Intl.DateTimeFormat
:使您可以访问对语言敏感的日期和时间格式
Intl.NumberFormat
: gives you access to language-sensitive number formatting
Intl.NumberFormat
:使您可以访问对语言敏感的数字格式
Intl.PluralRules
: gives you access to language-sensitive plural formatting and plural language rules
Intl.PluralRules
:使您可以访问对语言敏感的复数格式和复数语言规则
Intl.RelativeTimeFormat
: gives you access to language-sensitive relative time formatting
Intl.RelativeTimeFormat
:使您可以访问语言敏感的相对时间格式
It also provides one method: Intl.getCanonicalLocales()
.
它还提供了一种方法: Intl.getCanonicalLocales()
。
Intl.getCanonicalLocales()
lets you check if a locale is valid, and returns the correct formatting for it. It can accept a string, or an array:
Intl.getCanonicalLocales()
使您可以检查语言环境是否有效,并为其返回正确的格式。 它可以接受字符串或数组:
Intl.getCanonicalLocales('it-it') //[ 'it-IT' ]
Intl.getCanonicalLocales(['en-us', 'en-gb']) //[ 'en-US', 'en-GB' ]
and throws an error if the locale is invalid
并在语言环境无效时引发错误
Intl.getCanonicalLocales('it_it') //RangeError: Invalid language tag: it_it
which you can catch with a try/catch block.
您可以使用try / catch块来捕获。
Different types can interface with the Intl API for their specific needs. In particular we can mention:
不同类型可以根据其特定需求与Intl API接口。 我们尤其可以提及:
String.prototype.localeCompare()
String.prototype.localeCompare()
Number.prototype.toLocaleString()
Number.prototype.toLocaleString()
Date.prototype.toLocaleString()
Date.prototype.toLocaleString()
Date.prototype.toLocaleDateString()
Date.prototype.toLocaleDateString()
Date.prototype.toLocaleTimeString()
Date.prototype.toLocaleTimeString()
Let’s go and see how to work with the above Intl properties:
让我们来看一下如何使用以上Intl属性:
This property gives you access to language-sensitive string comparison
此属性使您可以访问语言敏感的字符串比较
You initialize a Collator object using new Intl.Collator()
, passing it a locale, and you use its compare()
method which returns a positive value if the first argument comes after the second one. A negative if it’s the reverse, and zero if it’s the same value:
您可以使用new Intl.Collator()
初始化Collator对象,并向其传递语言环境,并使用其compare()
方法,如果第一个参数在第二个参数之后,则该方法返回正值。 如果为负数,则为负数;如果为相同值,则为零:
const collator = new Intl.Collator('it-IT')
collator.compare('a', 'c') //a negative value
collator.compare('c', 'b') //a positive value
We can use it to order arrays of characters, for example.
例如,我们可以使用它来排序字符数组。
This property gives you access to language-sensitive date and time formatting.
此属性使您可以访问对语言敏感的日期和时间格式。
You initialize a DateTimeFormat object using new Intl.DateTimeFormat()
, passing it a locale, and then you pass it a date to format it as that locale prefers:
您使用new Intl.DateTimeFormat()
初始化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
The formatToParts() method returns an array with all the date parts:
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' } ]
*/
You can print the time as well. Check all the options you can use on MDN.
您也可以打印时间。 检查您可以在MDN上使用的所有选项。
This property gives you access to language-sensitive number formatting. You can use it to format a number as a currency value.
此属性使您可以访问对语言敏感的数字格式。 您可以使用它来格式化数字作为货币值。
Say you have a number like 10
, and it represents the price of something.
假设您有一个类似10
的数字,它表示某物的价格。
You want to transform it to $10,00
.
您想将其转换为$10,00
。
If the number has more than 3 digits however it should be displayed differently, for example, 1000
should be displayed as $1.000,00
如果数字多于3位,但是应该以不同的方式显示,例如,应将$1.000,00
1000
显示为$1.000,00
This is in USD, however.
但是,这是美元。
Different countries have different conventions to display values.
不同的国家有不同的惯例来显示价值 。
JavaScript makes it very easy for us with the ECMAScript Internationalization API, a relatively recent browser API that provides a lot of internationalization features, like dates and time formatting.
JavaScript通过ECMAScript国际化API (它是一种相对较新的浏览器API)对我们来说非常容易,该API提供了许多国际化功能,例如日期和时间格式,这是一个相对较新的浏览器API。
It is very well supported:
它得到很好的支持:
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"
The minimumFractionDigits
property sets the fraction part to be always at least 2 digits. You can check which other parameters you can use in the NumberFormat MDN page.
minimumFractionDigits
属性将小数部分始终设置为至少2位数。 您可以在NumberFormat MDN页面中检查可以使用哪些其他参数。
This example creates a number formatter for the Euro currency, for the Italian country:
本示例为意大利国家/地区创建欧元货币的数字格式化程序:
const formatter = new Intl.NumberFormat('it-IT', {
style: 'currency',
currency: 'EUR'
})
This property gives you access to language-sensitive plural formatting and plural language rules. I found the example on the Google Developers portal by Mathias Bynens the only one I could relate to practical usage: giving a suffix to ordered numbers: 0th, 1st, 2nd, 3rd, 4th, 5th..
此属性使您可以访问对语言敏感的复数格式和复数语言规则。 我在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
Every time we got other
, we translate that to th
. If we have one
, we use st
. For two
we use nd
. few
gets rd
.
每当我们有时间other
,我们那意思就是th
。 如果我们有one
,我们使用st
。 对于two
我们使用nd
。 few
得到rd
。
We can use an object to create an associative array:
我们可以使用一个对象来创建一个关联数组:
const suffixes = {
'one': 'st',
'two': 'nd',
'few': 'rd',
'other': 'th'
}
and we do a formatting function to reference the value in the object, and we return a string containing the original number, and its suffix:
然后我们执行格式化操作以引用对象中的值,然后返回包含原始数字及其后缀的字符串:
const format = (number) => `${number}${suffixes[pr.select(number)]}`
Now we can use it like this:
现在我们可以像这样使用它:
format(0) //0th
format(1) //1st
format(2) //2nd
format(3) //3rd
format(4) //4th
format(21) //21st
format(22) //22nd
Note that there are nice things coming soon to Intl, like Intl.RelativeTimeFormat
and Intl.ListFormat
, which are at the time of writing only available in Chrome and Opera.
请注意,Intl即将推出一些不错的功能,例如Intl.RelativeTimeFormat
和Intl.ListFormat
,它们在撰写本文时仅在Chrome和Opera中可用。
翻译自: https://flaviocopes.com/javascript-internationalization/
javascript国际化