用代码对数字进行格式化,显然不是逢三位加逗号这么简单。比如印度在数字分位符号上的处理,就堪称业界奇葩:

印度的数字读法用“拉克”(十万)和“克若尔”(千万),数字标法用不对称的数位分离,即小数点左侧首先是三位分隔,然后继续向左都是两位分隔。如:三千万(3 克若尔)会写成 3,00,00,000。 —— 维基百科

简单的暴利处理无法满足多语言支持,此时使用 Number.prototype.toLocaleString() 进行数字格式化处理再好不过。

使用 .toLocaleString()

在 JavaScript 中,数字对象的 .toLocaleString() 方法如果不传参数,则采用宿主环境的系统语言进行分位处理。

var price = 1024;
price.toLocaleString(); // => "1,024"

使用 locales 参数

在 ECMA-402 标准的实现中,增加了.toLocaleString() 方法对 locales 的支持,语法为 numObj.toLocaleString([locales [, options]])locales 参数接收 BCP 47 语言标签格式的字符串或数组。(HTML Language Code Reference,  ISO Language Code Table)

那么将数字强制转化为印度格式就变的简单:

var price = 1669999;
price.toLocaleString('en-IN'); // => "16,69,999"

这样就可以轻松处理多语言的自动格式化了,只要根据 <html lang="en-IN"> 中的 lang属性动态读取就可以了。

var price = 1669999;
var lang = document.querySelector('html').getAttribute('lang');
price.toLocaleString(lang); // 中文页面下 => "1,669,999"

使用 options 参数

如果仅仅是做到多语言自动格式化数字,显然还不够细腻。通过 .toLocaleString() 方法的 options 参数,可以做到转化至相应语言的货币格式。

在我的项目之前的实现中,多国语言的货币符号是通过模板渲染时读取配置文件完成转换的。如果使用.toLocaleString()  展示或加工展示所有货币数字,则无需这一步骤:

var price = 2499;
price.toLocaleString('en-IN', {
style: 'currency',
currency: 'INR'
});
// => "₹ 2,499.00"

如果不想要显示末尾的小数「.00」,只要设置一下最小分位 minimumFractionDigits 即可(默认是 2):

var price = 2499;
price.toLocaleString('en-IN', {
style: 'currency',
currency: 'INR',
minimumFractionDigits: 0
});
// => "₹ 2,499"

这样一个完美的价格格式化功能就完成了。options 对象参数接收一系列样式属性,常用的有:

  • style:可选值为 decimal(小数)、currency(货币)或 percent(百分比);
  • currency:设置为货币样式时使用的符号,支持列表在这里
  • useGrouping:布尔值,是否显示数字分位。

关于 locales 参数和 options 参数支持的其它属性,例如上面使用的 minimumFractionDigits,可以查阅 MDN,我刚把最新的英文版翻译了一遍。

兼容性

所有现代浏览器都支持 locales 参数,因此在移动端使用是安全无痛的。桌面端的支持则是 IE11 及以上。

另外,如果想在后端直接对不同页面直接输出对应的货币符或者做分位转换等操作,只要用 node.js 做一个转换就行了。

想到这里,我已经忍不住要萌萌哒了,去优化我们的工作流啦。JavaScript,FTW!

阅读原文

相关链接

使用 .toLocaleString() 轻松实现多国语言价格数字格式化的更多相关文章

  1. 高质量,高效率的多国语言软件开发(Web/PC/Mobile),使用接口约束/调用不同语言资源

    偶然间翻出了几年前写的一个小程序,把当时的资料整理整理分享一下. 当时为了给自己的软件实现多国语言功能,而开发的辅助工具:SE String Resource. 这是当时基于自己另一款 IDE 软件抽 ...

  2. 解析大型.NET ERP系统 多国语言实现

    实现多国语言有许多种实现方案,无外乎是一种字符串替换技术,将界面控件的文本标签替换成相应语言的文字..NET Windows Forms实现多国语言的方法有以下几种: 1 .NET的方案,使用资源文件 ...

  3. 动态加载多国语言 ---- cookie + 浏览器

    一.多国语言缩写列表 因为涉及到浏览器的可接收语言,所以需要知道各个国家的语言缩写. 这个百度一下即可. en 英文 en_US 英文 (美国) ar 阿拉伯文 ar_AE 阿拉伯文 (阿拉伯联合酋长 ...

  4. WinCE6.0多国语言软键盘

    N久以前写过一篇<WinCE下自定义的大软键盘>,这个自定义软键盘就是为RM905a+项目来做的.RM905a+的系统分辨率是640*480,WinCE原生键盘小的太小,大的又太大.所以就 ...

  5. android多国语言文件夹文件汇总

    android多国语言文件夹文件汇总如下: 中文(中国):values-zh-rCN 中文(台湾):values-zh-rTW 中文(香港):values-zh-rHK 英语(美国):values-e ...

  6. 引擎设计跟踪(九.8) Gizmo helper实现与多国语言

    最近把gizmo helper的绘制做好了. 1.为了复用代码,写了utility来创建sphere, cube, cylinder, plane, ring(line), circle(solid) ...

  7. C#实现多国语言的界面切换

    在PictureStudio中,我需要实现多国语言的界面切换,而且切换各种语言版本的时候希望程序是动态的加载语言,不希望切换语言后重新启动程序. 实现这样的功能可以有很愚蠢的方法,比如说你可以在程序中 ...

  8. android多国语言文件夹

    android多国语言文件夹文件汇总如下:(有些语言的书写顺序可能跟中文是相反的) 中文(中国):values-zh-rCN 中文(台湾):values-zh-rTW 中文(香港):values-zh ...

  9. Java系列--第六篇 基于Maven的SSME之多国语言实现

    如果你的网站足够强大,以致冲出了国门,走向了国际的话,你就需要考虑做多国语言了,不过,未雨绸缪,向来是我辈程序人员的优秀品质,谁知道那天,我们的网站被国外大公司看中收购,从而飞上枝头变凤凰.不扯这么多 ...

随机推荐

  1. 不要再用if(xxx != null)或者try catch NullPointerException了,Optional可以帮你解决

    public static void testIfPresent() { Map<String, Map<String, String>> map = new HashMap& ...

  2. idea springboot热部署无效问题

    Intellij IDEA 使用Spring-boot-devTools无效解决办法 springboot项目中遇到的bug <dependencies> <!--spring bo ...

  3. 使用perf工具导致系统hang死的原因

    [perf工具导致系统hang住的原因是触发了低版本kernel的bug] 今天在测试服务器做压测,运行perf record做性能分析时,系统再次hang住了,这次在系统日志中记录了一些有用的信息, ...

  4. Alpha冲刺随笔—:第一天

    课程名称:软件工程1916|W(福州大学) 作业要求:项目Alpha冲刺(十天冲刺) 团队名称:葫芦娃队 作业目标:在十天冲刺里对每天的任务进行总结. 随笔汇总:https://www.cnblogs ...

  5. BZOJ.2437.[NOI2011]兔兔与蛋蛋游戏(二分图博弈 匈牙利)

    题目链接 首先空格的移动等价于棋子在黑白格交替移动(设起点移向白格就是黑色),且不会走到到起点距离为奇数的黑格.到起点距离为偶数的白格(删掉就行了),且不会重复走一个格子. (然后策略就同上题了,只不 ...

  6. AGC 016B.Colorful Hats(思路)

    题目链接 对于某个元素分类讨论一下,就可以知道n个元素的总颜色种数了. 比如对a[1]分类讨论: 若1的颜色和某个元素相同,则总颜色数为a[1].a[i]要么等于a[1](i与某个元素颜色相同,记个数 ...

  7. Cocos Creator代码编辑环境配置

    1,可以使用较为适合js的webstorm,亦可以采用VS: 2,若需要webstorm,在下载之后,在文件,设置内外部编辑器选用webstorm.exe,即可: 3,Visual Studio Co ...

  8. 使用C3P0报错:java.lang.NoClassDefFoundError: com/mchange/v2/ser/Indirector

    错误提示: java.lang.NoClassDefFoundError: com/mchange/v2/ser/Indirector at JDBC.ConnectionPool.testC3P0( ...

  9. 网络编程(1)—TCP

    java.net 包中提供了两种常见的网络协议的支持: TCP:TCP 是传输控制协议的缩写,它保障了两个应用程序之间的可靠通信.通常用于互联网协议,被称 TCP / IP. TCP协议: 使用TCP ...

  10. linux下自定义域名访问本机部署的应用

    在linux系统下,用weblogic部署了两套应用,创建了两个虚拟主机,一个主机指向www.test1.com, 另一个虚拟主机指向www.test2.com. 一套应用指定一台虚拟主机. 修改/e ...