首页 > 编程语言 >JavaScript国际化API

JavaScript国际化API

时间:2023-02-06 19:11:07浏览次数:38  
标签:国际化 console Intl JavaScript 指定 API let 字符串 属性

JavaScript国际化API

前言:

英语是世界上使用最广泛的语言,但只有七分之一的人说英语。它是3.79亿人口的第一种(母语)语言,但是有9.17亿人说普通话,4.6亿人说西班牙语和3.41亿人说北印度语。许多讲非英语的人居住在互联网指数增长的新兴市场。如果您的Web应用程序可以进行全球翻译,那么您的潜在目标市场可能会增加700%!JavaScript Internationalization API(也称为i18n)使您可以以易于适应网页的方式来设计网页和应用程序,以支持使用不同语言的用户的需求。

摘要:

JavaScript国际化API包括三个类:Intl.NumberFormat、Intl.DateTimeFormat和Intl.Collator。这三个类允许我们以合适的方式格式化数值(包括货币数量和百分数)、日期和时间,以及以合适的方式比较字符串。这些并不是ECMAScript标准定义的,而是ECMA402标准定义的而且得到了浏览器的普遍支持。

国际化的一个重点是显示已经翻译为用户语言的文本。实现者和目标有很多方式,本文介绍的IntlAPI并无涉及其中任何一种方式。

一、格式化数值

摘要:

世界各地的用户对数值格式的预期是不同的。小数点可能是句号,也可能是逗号。千分位分隔符可能是逗号,也可能是句点,而且不是所有地区都是3个数字一组。某些地区的货币要以百位单位分隔,有些则已千分为单位,还有不需要分隔。最后,虽然所谓的阿拉伯数字0-9在很多语言中使用,但其实也不是普适的,某些国家的用户期待看到自己的文字书写的数字。

Intl.NumberFormat():

  Intl.NumberFormat类定义了一个format()方法,考虑到了上述所有格式的可能性。这个构造函数接受到两个参数,第一个参数指定作为数值格式化依据的地区,第二个参数是用于指定格式化细节的对象,如果第一个参数被省略,或者传入的是undefined,则使用系统设置的地区(假设该地区位用户偏好地区)。如果第一个参数是字符串,那他就是期望地区,例如:"en-us"(美国英语),第一个参数也可以是一个地区字符串数组,此时Intl.NumberFormat会选择支持最好的那一个。

如果指定Intl.NumberFormat()构造函数的第二个参数,则该函数应该是一个对象,而且包含一个或多个下属属性。

style: 

指定必须的数值格式类型。默认为“decimal”,如果指定“percent”则按百分比格式数值化,指定“currery”则表示数字为货币数量。

currency:

如果style的值为“currency”,则这个属性是必须的,用于指定3个字母的ISO货币代码(如:“usd”表示美元)

currencyDisplay

如果style的值为“currency”,则这个属性指定如何显示货币值。默认值为“symbol”,即如果货币有负号则使用货币符号。值“code”表示使用3个字母的ISO代码、值“name”表示以完整形式拼出货币的名字。

useGrouping

如果不想让数值有千分位分隔符(或者其他地区相关的样式)这个属性设置为False。

minimumIntegerDigits

数值中最少显示几位整数。如果数值的小数部分位数小于最小值,则在左侧填补0,默认值是1,但最高值可以设置位21。

minimumSignificantDigit、maximumSignifiacntDigins

这两个属性控制数值小数部分的格式。如果数值的小数部分位数小于最小值,则在左右侧填补0.如果大于最小值,则小数部分会被舍入。这两个属性的取值范围是0到20。默认最小值为0,最大值为3,但格式化货币数量是例外,此时小数部分的长度根据指定的货币会有所不同。

minimunSIgnificantDigits、maximunSIgnificantDigits

这两个属性控制数值中有效位的数量,比如让他们适合格式化科学依据,如果指定,这两个属性会覆盖前面列出的整数和小数属性,合法取值1-21。

 

实例:

let rueos = Intl.NumberFormat("es",{style:"currency",currency:"EUR",currencyDisplay:"name",useGrouping:"false"});
rueos = rueos.format(10000)
console.log(rueos)//10.000,00 euros
let ou = Intl.NumberFormat("rpc",{style:"currency",currency:"CNY",currencyDisplay:"name",useGrouping:"false"})
ou=ou.format(10000)
console.log(ou)//10,000.00人民币
let data = [0.05,.75,1]
let formatdata = Intl.NumberFormat(undefined,{style:"percent",minimumIntegerDigits:"1",maximumFractionDigits:"1"}).format
data =  data.map(formatdata)
console.log(data)//['5%', '75%', '100%']

 

二、格式化日期和时间

摘要:

Intl.DateTimeFormat类与Intl.NumberFormat类很相似。Intl.DateTimeForamt()构造函数与Intl.NumberFormat()接受相同的两个参数:一个地区或地区数组,另一个格式化选项的对象,使用Intl.DateTimeFormat实例的方式也是调用format()的方法,将Date对象转化为字符串。

选项对象中的属性如下所示。只需为你想在格式化输出中看到的日期和时间字段指定属性即可。

year

年,使用“numeric”表示完整的4位数年份,或使用“2-digit”表两位数简写形式。

mouth

月,使用numeric表示可能比较短的数字,如“1”,或使用2-digit表示始终使用两位数字,如01。使用“long”表示全名,如“January”,使用“short”表示简称,E如:“Jan”,而使用“narrow”表示高度简写的名字,如“J”但不能保证唯一。

day

日,使用“numeric”表示1位或2位数字,或使用“2-digit”表示2位数字。

weekday

周,使用“long”表示全名,如“Monday”,或使用“short”表示简称,如“Mon”,或使用“narrow”表示高度简写的名字,如“M”,但不保证唯一。

era

这个属性指定日期再格式化是否考虑纪元,例如CE或BCE。这个属性在格式化很久以前的日期或者使用日文日历是有用。合法值为“long”“short”和“narrow”

hour、minute、second

这几个属性指定如何显示时间。使用“numeric”表示1位或者2位数字,使用“2-digit”表示强制1位数字在左侧填补0。

timeZoneName

这个属性指定在格式化的日期和时间中如何显示时区。使用“long”表示时区全称,而“short”表示简写或数值形式的时区。

timeZone

这个属性指定格式化日期使用的时区。如省略,则使用本地时区。实现可能始终以UTC为准。

hour12

这是布尔值属性,指点是否使用12小时制。默认值取决于地区设置,但可以使这个属性来覆盖。

hourCyle

这个属性允许指定在半夜12点是写为0时、12时还是24时。默认值取决于地区设备,但可以使用这个属性来覆盖。注意hour12相比这个属性具有更高的优先级,使用“h11”指定半夜12点是0时,而此前1小时是晚上11点。使用“h12”指定半夜是12点。使用“h23”指定半夜是0时,而此前1小时是23时。最后使用“h24”将半夜指定为24时。

实例:

let d = new Date("2020-01-02T01:14:15Z");
console.log(d)//Thu Jan 02 2020 09:14:15 GMT+0800 (中国标准时间)
//没有选项对象,就是基本的数字是日期格式
let d1=Intl.DateTimeFormat("en-US").format(d)
console.log(d1)//1/2/2020
let d2 = Intl.DateTimeFormat("cn-CN").format(d)
console.log(d2)//2020/1/2
let d3 = Intl.DateTimeFormat("fr-FR").format(d)
console.log(d3)//02/01/2020
let opts = {weekday:"long",month:"long",year:"numeric",day:"numeric"};
let d4= Intl.DateTimeFormat("en-US",opts).format(d)
console.log(d4)//Thursday, January 2, 2020
let d5= Intl.DateTimeFormat("cn",opts).format(d)
console.log(d5)//2020年1月2日星期四
let d6= Intl.DateTimeFormat("fr",opts).format(d)
console.log(d6)//jeudi 2 janvier 2020
let opts1 = {hour:"numeric",minute:"2-digit",timeZone:"America/New_York"};//jeudi 2 janvier 2020
let d7  = Intl.DateTimeFormat("cn",opts1).format(d);
console.log(d7)//20:14

 

三、比较字符串

摘要:

按字母顺序对字符串排序(或者更通过的说法是对非字母文字“整理排序”)是一个经常会超出英语人士预想的问题。英语的字母表相对较小,没有重音字母,而且有字母编码的优势,其中数字值完全匹配英语标准的字符串排序习惯。对其他1语言来说就没有哪里简单了。比如,西班牙语就将ñ看成位于n后边、n前面的字母。立陶宛语字母Y位于J前面,威尔士语将二合字母CH和DD当成一个字母。但CH在C后面,DD则在D后面。

如果想以自然的方式向用户显示字符串,只使用字符串数组的sort()方法是不够的。但如果创建一个Intl.Collator对象,可以将这个对象的compare()传给sort()方法,已执行符合当地的字符串排序。intl.Collator对象可以配置让compare()方法执行不匹配大小写的比较,甚至只考虑基本字母且忽略重音和其他变音符号的比较。

 

与Intl.NumberFormat()和Intl.DateTimeForamt()类似,Intl.Collator()构造函数也接受两个参数。第一个参数指定地区或地区数组,第二个参数是一个可选择的对象,其属性指定具体执行哪种比较。一下是选项对象参数支持的属性。

usage

这个属性指定如何使用整理器(collator)对象,默认值为“sort”,但也可以指定为“search”。背后的思想是在排序字符串时,我们通常希望整理器区分尽可能多的字符串已产生可靠的排序。但在比较两个字符串时,某些地区可能想进行不那么严格的比较,比如忽略重音。

sensitivity

这个属性指定整理器在比较字符串时是否区分字母大小写和重音。值“base”意味着比较时忽略大小写和重音,只考虑每个字符的基本字母(不过要注意,某些语言有的语言的中读字符不同于基本字母)。“accent”在比较时考虑重音但忽略大小写。“case”考虑大小写但忽略重音。而“variant”执行严格的比较,及区分大小写也考虑重音。这个属性的默认值在usage是“sort”时是“variant”,如果usage是“search”,默认大小写规则取决于地区。

ignorePunctuation

将这个属性设置为Ture以便在比较字符串时忽略空格和标点符号。比如,将这个属性设置为Ture时,字符串“any one”和“anyone”会被认为相等。

numeric 

如果比较的内容是整数或者包含整数,而你希望按照数字顺序而非字母顺序对它们进行排序,要讲这个属性设置为ture。选项设置后,字符串“version9”会排在“verison10”前面。

caseFirst

这个属性指定是大写字母还是小写字母会排在前面。如果指定“upper”,则“A”会排在“a”前面。如果指定“lower”,则“a”会排在"A"前面。无论哪种形式优先,同一字母大写变体和小写变体在排序中会紧挨在一起,而不同于所有的ASCII大写字母会位于所有ASCII小写字母之前的Unicode字典顺序(即Array的sort()方法的默认行为)。这个属性的默认值因地区而异,实现可能会忽略这个属性,不允许我们覆盖大小写排列的顺序。

在通过选项为目标地区创建Intl.Collator对象之后,可以使用他的compare()方法比较两个字符串。,这个方法返回一个数值,如果返回的值小于0,择地一个字符串位于第二第字符串之前。如果返回的值大于0,这第一个字符串位于第二个字符串的后面,如果compare()返回0,则说明整理器任务两个字符串相等。

compare()方法接受两个字符串参数,返回一个小于、等于、大于的值,这跟Array的sort()方法期待的可选参数和返回值特点完全一致。同样,Intl.collator也会自动机将compare()的方法绑定到他的实例,因此可以直接把这个方法传给sort()而无需填写包装函数在通过整理器调整它,下面是几个小例子:

实例:

//按照用户地区排序的简单整理器
//千万不要像这个例子这样什么也不传就对人类可读的字符串进行排序
const collator = new Intl.Collator().compare;
const collator1 = ["a","A","z","Z"].sort(collator)
console.log(collator1)//(4) ['a', 'A', 'z', 'Z']
//文件名常包含数值,因此需要进行特殊排序。
const filename = new  Intl.Collator(undefined,{numeric:"ture"}).compare;
let filename1 = ["p9","p8","p10"].sort(filename)
console.log(filename1)//(3) ['p8', 'p9', 'p10']
//查找大致匹配目标字符串的所有字符串
const fuzzy = new Intl.Collator(undefined,{sensitivity:"base",ignorePunctuation:true}).compare;
let strings = ["food","fool","Foo Bar"];
let strings1 = strings.findIndex(s => fuzzy(s,"foobar")===0)
console.log(strings1)//2

 

总结:

此章内容的学习可以快速掌握js国家化API的知识,对于你的网页和程序满足不同语言客户的需求起到帮助。

参考资料:

《JavaScript权威指南》

 

标签:国际化,console,Intl,JavaScript,指定,API,let,字符串,属性
From: https://www.cnblogs.com/user-zbb/p/17095838.html

相关文章