【总结】国际化数字格式处理解决神器

背景

最近公司项目出海速度增快，相同的业务模式，前端大部分的业务代码都可以复用，其中需要额外处理的有几个模块：

• 语言包
• 货币符号
• 数字显示格式(包括日期、千分位规则等)

其中对于不同的国家，其数字显示格式略有不同，比如千分位格式，针对不同国家维护一套正则匹配需要增加开发和后期维护成本，这就引出了今天介绍的toLocaleString()神器

toLocaleString 用法

Number.prototype.toLocaleString()

numObj.toLocaleString([locales [, options]])

• locales 语言参数，用来确定国家和语言；比如es-MX 表示墨西哥的西语、es-AR 表示阿根廷的西语、pt-BR 表示巴西的葡萄牙
• options 一个object，配置具体展示的形式，常用的属性有： 1.style 展示百分比 or 纯数字格式(默认) 2.currency 货币符号 3.minimumFractionDigits 最少小数位数 4.maximumFractionDigits 最大小数位数

var num1 = 84629489879879.6223
num1.toLocaleString('pt-BR', { maximumFractionDigits: 2 })
// "84.629.489.879.879,62"

var num2 = 84629489879879.6223
num2.toLocaleString('es-MX', { maximumFractionDigits: 2 })
// "84,629,489,879,879.62"
复制代码

Date.prototype.toLocaleString()

1.dateObj.toLocaleString([locales [, options]]) 返回日期+时间的格式化结果，常见配置同上

// US English uses month-day-year order
var date1 = new Date()
date1.toLocaleString('en-US')
// "1/21/2019, 4:18:12 PM"

// British English uses day-month-year order
var date2 = new Date()
date2.toLocaleString('en-GB')
// "21/01/2019, 16:18:47"

// British English uses day-month-year order
var date3 = new Date()
date3.toLocaleString('ko-KR')
// "2019. 1. 21. 오후 4:19:21"
复制代码

2.dateObj.toLocaleDateString([locales [, options]]) 只返回date部分的格式化结果

var date1 = new Date()
date1.toLocaleDateString('en-US')
// "1/21/2019"

var date2 = new Date()
date2.toLocaleDateString('en-GB')
// "21/01/2019"

var date3 = new Date()
date3.toLocaleDateString('ko-KR')
// "2019. 1. 21."
复制代码

3.dateObj.toLocaleTimeString([locales [, options]]) 只返回time部分的格式化结果

var date1 = new Date()
date1.toLocaleTimeString('en-US')
// "4:28:24 PM"

var date2 = new Date()
date2.toLocaleTimeString('en-GB')
// "16:27:50"

var date3 = new Date()
date3.toLocaleTimeString('ko-KR')
// "오후 4:28:54"
复制代码

参考链接

Number.prototype.toLocaleString

Date.prototype.toLocaleString

转载于:https://juejin.im/post/5c7ca175e51d454e4f6bf662