了解如何使用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,可提供许多国际化功能,例如日期和时间格式。
它得到很好的支持:
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
我们用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中提供。
免费下载我的JavaScript初学者手册
更多js教程:
- JavaScript中应避免的事情(不良部分)
- JavaScript中的延迟和承诺(+ Ember.js示例)
- 如何使用JavaScript将文件上传到服务器
- JavaScript编码风格
- JavaScript数组简介
- JavaScript编程语言简介
- 完整的ECMAScript 2015-2019指南
- 了解JavaScript承诺
- JavaScript的词汇结构
- JavaScript类型
- JavaScript变数
- 示例Web应用程序提示列表
- JavaScript函数式编程简介
- 具有Async和Await的现代异步JavaScript
- JavaScript循环和范围
- Map JavaScript数据结构
- 设置JavaScript数据结构
- JavaScript模板文字指南
- 学习JavaScript的路线图
- JavaScript表达式
- 发现JavaScript计时器
- JavaScript事件说明
- JavaScript循环
- 使用map,filter,reduce和find编写JavaScript循环
- JavaScript事件循环
- JavaScript函数
- JavaScript词汇表
- JavaScript闭包说明
- JavaScript Arrow函数教程
- JavaScript正则表达式指南
- 如何在JavaScript中检查字符串是否包含子字符串
- 如何从JavaScript中的数组中删除项目
- 如何深度克隆JavaScript对象
- Introduction to Unicode and UTF-8
- JavaScript中的Unicode
- 如何在JavaScript中大写字符串的第一个字母
- 如何在JavaScript中将数字格式化为货币值
- 如何在JavaScript中将字符串转换为数字
- 这在JavaScript中
- 如何在JavaScript中获取当前时间戳
- JavaScript严格模式
- JavaScript立即调用函数表达式(IIFE)
- 如何使用JavaScript重定向到另一个网页
- 如何从JavaScript对象中删除属性
- 如何在JavaScript中将项目追加到数组
- 如何检查JavaScript对象属性是否未定义
- ES模块简介
- CommonJS简介
- JavaScript异步编程和回调
- 如何替换JavaScript中所有出现的字符串
- 现代JavaScript语法快速参考指南
- 如何在JavaScript中修剪数字中的前导零
- 如何检查JavaScript对象
- 关于JavaScript日期的权威指南
- Moment.js教程
- JavaScript中的分号
- JavaScript算术运算符
- JavaScript Math对象
- 在JavaScript中生成随机且唯一的字符串
- 如何使您的JavaScript函数进入睡眠状态
- JavaScript原型继承
- JavaScript例外
- 如何使用JavaScript类
- JavaScript食谱
- JavaScript中的引号
- 如何在JavaScript中验证电子邮件地址
- 如何获取JavaScript数组中一组对象的唯一属性
- 如何在JavaScript中检查字符串是否以另一个字符串开头
- 如何在JavaScript中创建多行字符串
- ES6指南
- 如何在JavaScript中获取当前URL
- ES2016指南
- 如何使用JavaScript中的值初始化新数组
- ES2017指南
- ES2018指南
- 如何在Array.prototype.map()中使用Async和Await
- 异步与同步代码
- 如何在JavaScript中生成两个数字之间的随机数
- HTML Canvas API教程
- 如何在JavaScript中的for-of循环中获取迭代的索引
- 什么是单页应用程序?
- WebAssembly简介
- JSON简介
- JSONP指南
- Should you use or learn jQuery in 2020?
- 如何使用纯JavaScript隐藏DOM元素
- 如何在JavaScript中合并两个对象
- 如何清空JavaScript数组
- 如何使用JavaScript编码URL
- 如何在JavaScript中设置默认参数值
- 如何在JavaScript中按属性值对对象数组进行排序
- 如何计算JavaScript对象中的属性数量
- JavaScript中的call()和apply()
- WebRTC库PeerJS简介
- 使用Rest and Spread处理对象和数组
- 用JavaScript分解对象和数组
- 调试JavaScript的权威指南
- TypeScript指南
- 在JavaScript中动态选择对象的方法
- 将undefined传递给JavaScript立即调用的函数表达式
- 松散类型与强类型语言
- 如何使用JavaScript设置DOM元素的样式
- 用JavaScript投放
- JavaScript生成器教程
- node_modules文件夹的大小不是问题。这是一种特权
- 在JavaScript中导入模块时如何解决意外的标识符错误
- 如何在JavaScript中列出对象的所有方法
- 字符串replace()方法
- 字符串search()方法
- 我如何运行一些JavaScript代码段
- ES2019指南
- 字符串charAt()方法
- 字符串charCodeAt()方法
- 字符串codePointAt()方法
- 字符串concat()方法
- 字符串endsWith()方法
- 字符串include()方法
- 字符串indexOf()方法
- 字符串lastIndexOf()方法
- 字符串localeCompare()方法
- 字符串match()方法
- 字符串normalize()方法
- 字符串padEnd()方法
- 字符串padStart()方法
- 字符串repeat()方法
- 字符串slice()方法
- 字符串split()方法
- 字符串startsWith()方法
- String substring()方法
- 字符串toLocaleLowerCase()方法
- 字符串toLocaleUpperCase()方法
- String toLowerCase()方法
- 字符串toString()方法
- String toUpperCase()方法
- 字符串trim()方法
- String trimEnd()方法
- String trimStart()方法
- JavaScript的记忆化
- 字符串valueOf()方法
- JavaScript参考:字符串
- Number isInteger()方法
- Number isNaN()方法
- Number isSafeInteger()方法
- Number parseFloat()方法
- Number parseInt()方法
- Number toString()方法
- Number valueOf()方法
- Number toPrecision()方法
- Number toExponential()方法
- Number toLocaleString()方法
- Number toFixed()方法
- Number isFinite()方法
- JavaScript参考:数字
- JavaScript属性描述符
- 对象的assign()方法
- 对象的create()方法
- Object defineProperties()方法
- Object defineProperty()方法
- 对象entry()方法
- 对象Frozen()方法
- Object getOwnPropertyDescriptor()方法
- Object getOwnPropertyDescriptors()方法
- Object getOwnPropertyNames()方法
- Object getOwnPropertySymbols()方法
- Object getPrototypeOf()方法
- Object is()方法
- Object isExtensible()方法
- Object isFrozen()方法
- Object isSealed()方法
- 对象keys()方法
- 对象的preventExtensions()方法
- 对象seal()方法
- Object setPrototypeOf()方法
- Object values()方法
- 对象的hasOwnProperty()方法
- Object isPrototypeOf()方法
- 对象的propertyIsEnumerable()方法
- Object toLocaleString()方法
- Object toString()方法
- Object valueOf()方法
- JavaScript参考:对象
- JavaScript赋值运算符
- JavaScript国际化
- JavaScript typeof运算子
- JavaScript新运算符
- JavaScript比较运算符
- JavaScript运算符优先级规则
- JavaScript instanceof运算符
- JavaScript陈述式
- JavaScript范围
- JavaScript类型转换(广播)
- JavaScript相等运算符
- JavaScript if / else条件
- JavaScript切换条件
- JavaScript删除运算符
- JavaScript函数参数
- JavaScript Spread运算符
- JavaScript返回值
- JavaScript逻辑运算符
- JavaScript三元运算符
- JavaScript递归
- JavaScript对象属性
- JavaScript错误对象
- JavaScript全局对象
- JavaScript filter()函数
- JavaScript map()函数
- JavaScript reduce()函数
- JavaScript`in`运算子
- JavaScript运算子
- 如何在JavaScript中获取CSS属性的值
- 如何将事件侦听器添加到JavaScript中的多个元素
- JavaScript私有类字段
- 如何在JavaScript中按日期值对数组排序
- JavaScript公共类字段
- JavaScript符号
- 如何使用JavaScript bcrypt库
- 使用对象解构时如何重命名字段
- 如何在不使用TypeScript的情况下检查JavaScript中的类型
- 如何检查JavaScript数组是否包含特定值
- 双重否定运算符是什么!用JavaScript做吗?
- JavaScript比较中应使用哪个等号运算符? == vs ===
- JavaScript仍然值得学习吗?
- 如何在JavaScript中返回异步函数的结果
- 如何在JavaScript中检查对象是否为空
- 如何突破JavaScript中的for循环
- 如何在JavaScript中的特定索引处将项目添加到数组
- 为什么不应该修改JavaScript对象原型
- 在JavaScript中使用let和var有什么区别?
- 用于激活JavaScript功能的链接
- 如何在JavaScript中连接两个字符串
- 如何在JavaScript中连接两个数组
- 如何检查JavaScript值是否为数组?
- 如何在JavaScript中获取数组的最后一个元素?
- 如何使用Axios发送urlencoded数据
- 如何使用JavaScript获取明天的日期
- 如何使用JavaScript获取昨天的日期
- 如何从JavaScript日期获取月份名称
- 如何检查两个日期是否在JavaScript中是同一天
- 如何在JavaScript中检查日期是否指向过去的一天
- 标有JavaScript的语句
- 如何等待2个或更多的Promise在JavaScript中解析
- 如何在JavaScript中获取两个日期之间的日期
- 如何使用提取上传文件
- 如何在JavaScript中格式化日期
- 如何遍历JavaScript中的对象属性
- 如何在JavaScript中计算两个日期之间的天数
- 如何在ES模块中使用顶级等待
- JavaScript动态导入
- JavaScript可选链接
- 如何在JavaScript中替换字符串内的空格
- JavaScript空合并
- 如何在JavaScript中展平数组
- JavaScript的十年
- 如何使用Axios发送授权标头
- JavaScript中的关键字和保留字列表
- 如何在JavaScript中将数组转换为字符串
- 如何删除所有的node_modules文件夹内容
- 如何从JavaScript数组中删除重复项
- 在JavaScript中让vs const
- 各种JavaScript库中的相同POST API调用
- 如何在JS中获取数组中的前n个项目
- 如何在JS中将数组划分为多个相等的部分
- 如何减慢JavaScript中的循环
- 如何在HTML画布中加载图像
- 如何在JavaScript中将字符串切成单词
- 如何在JavaScript中将数组分成两半
- 如何将文本写入HTML画布
- 如何在JavaScript中删除字符串的最后一个字符
- 如何在JavaScript中删除字符串的第一个字符
- 如何修复TypeError:无法分配为只读对象“#< Object>”的属性“ exports”错误
- 如何创建退出意图弹出窗口
- 如何检查一个元素是否是另一个元素的后代
- 如何对每个Axios请求强制使用凭据
- 如何解决JavaScript中的“不是函数”错误
- 盖茨比,如何更改图标
- 使用Gatsby加载外部JS文件
- 如何使用JavaScript检测暗模式
- 包裹,如何修复“ regeneratorRuntime未定义”错误
- 如何检测Adblocker是否与JavaScript一起使用
- 使用TypeScript中的类型进行对象分解
- Deno手册:Deno的简要介绍🦕
- 如何使用JavaScript获取路径或URL的最后一段
- 如何随机播放JavaScript数组中的元素
- 如何检查JavaScript对象中是否存在密钥
- 事件冒泡和事件捕获
- event.stopPropagation与event.preventDefault()与在DOM事件中返回false
- JavaScript中的原始类型与对象
- 在JavaScript中,如何判断值的类型?
- 如何从JavaScript中的函数返回多个值
- JavaScript中的箭头函数与常规函数
- 我们可以通过哪些方式访问对象属性的值?
- JavaScript中的null和undefined有什么区别?
- 方法和函数有什么区别?
- 我们可以通过哪些方法摆脱JavaScript循环?
- JavaScript for..of循环
- 什么是JavaScript中的对象解构?
- JavaScript吊起了什么?
- 如何使用JavaScript将逗号更改为点
- 使用DOM时计时的重要性
- 如何反转JavaScript数组
- 如何在JavaScript中检查值是否为数字
- 如何在JavaScript函数中接受无限的参数
- JavaScript代理对象
- 使用香草JavaScript在浏览器中进行事件委托
- JavaScript super关键字
- XState简介
- 值是通过引用传递还是通过JavaScript中的值传递?
- JavaScript中的自定义事件
- JavaScript中的自定义错误
- JavaScript中的命名空间
- JavaScript中逗号的奇怪用法
- JavaScript中的链接方法调用
- 如何处理承诺拒绝
- 如何在JavaScript中交换两个数组元素
- 如何在使用Gitbook时解决“ cb.apply不是函数”错误
- 如何在JavaScript中的数组开头添加项目
- Gatsby,修复“找不到模块gatsby-cli / lib / reporter”错误
- 如何获取JavaScript数组中项目的索引
- 如何在JavaScript中测试空对象
- 如何将对象解构为JavaScript中的现有变量
- 数组JavaScript数据结构
- 堆栈JavaScript数据结构
- JavaScript数据结构:队列
- JavaScript数据结构:集
- JavaScript数据结构:字典
- JavaScript数据结构:链接列表
- JavaScript,如何导出函数
- JavaScript,如何导出多个功能
- JavaScript,如何退出功能
- JavaScript,如何在字符串中查找字符
- JavaScript,如何过滤数组
- JavaScript,如何扩展类
- JavaScript,如何在数组中查找重复项
- JavaScript,如何替换数组的项
- JavaScript算法:线性搜索
- JavaScript算法:二进制搜索
- JavaScript算法:选择排序
- JavaScript算法:Quicksort
- JavaScript算法:合并排序
- JavaScript算法:冒泡排序