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

印度的数字读法用“拉克”(十万)和“克若尔”(千万),数字标法用不对称的数位分离,即小数点左侧首先是三位分隔,然后继续向左都是两位分隔。如:三千万(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 语言标签格式的字符串或数组

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

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 对象参数接收一系列样式属性,常用的有:

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

关于 locales 参数和 options 参数支持的其它属性,例如上面使用的 minimumFractionDigits,可以查阅 MDN


兼容性

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

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


参考: https://www.cnblogs.com/276815076/p/10028391.html

使用 .toLocaleString() 轻松实现多国语言价格数字格式化相关推荐

  1. 柔宇发布“手写神器”柔记樱雪白特别版,支持7国语言手写识别

    深圳2018年9月26日电 /美通社/ -- 9月23日,柔宇科技在2018北京国际设计周期间首次对外发布柔宇科技的"柔性+"办公教育类升级新品 -- 柔记 RoWrite S 智 ...

  2. 【商业资源】Tim在线客服/五国语言自动翻译/卡密登录

    Tim在线客服,五国语言自动翻译,卡密登录. 全网客服系统功能最齐全,最安全. 防渗透,基于ThinkPhp6 + Swoole + LayUi + PHP8 开发. 部署即可运营,轻松与您的网站整合 ...

  3. c++图书管理系统_轻松学做C语言课程设计:图书管理系统-数组实现

    C语言课程设计,对于初学者来说,主要是综合运用C语言基础知识,以实际项目的形式锻炼编程能力.从今天开始,一起轻松学做C语言课程设计常见项目,建议先运行代码,再一步步理解其实现. 题目要求 图书管理系统 ...

  4. 离线翻译android开发,有道翻译官推出Android版 可离线翻译多国语言

    日前,有道翻译官正式推出安卓版,凭借多国语言离线翻译和国内首创的多语种摄像头翻译等功能,为广大用户提供最便捷实用的翻译体验. 有道翻译官曾在iOS平台上大放异彩,上线当日,即取得了App Store ...

  5. SPSS Statistics 17.0多国语言(含中文)完整注册版

    使用全新的SPSS超强统计软体来分析资料,让您操作轻松,并做出具丰富特色的报表. SPSS视窗系列能帮助您发现那些以前使用试算表及资料库时所无法注意到资料里的重要趋势.另外还能够在难以解决的问题上,帮 ...

  6. 好用的多国语言翻译软件—“Mate Translate”

    语言是国际语言,一个人的精力有限,能掌握3.4中语言就很了不起了!那么,出门在外,听不懂别人的话怎么办?小编今天为大家推荐好用的多国语言翻译软件-"Mate Translate". ...

  7. 使用VB6资源文件开发多国语言应用攻略

    VB6被很多程序员认为是一个过气的开发工具,但它实在是微软最经典的开发工具,没有之一!编译出的程序短小精悍,一般就几十K,而且从XP以后的操作系统,均携带其运行时库,只要程序只使用VB的标准控件,连安 ...

  8. 现提供“威力导演10极致版(多国语言含中文)+ 有效激活方法如下——

    大名鼎鼎的专业级影片剪辑制作软件"威力导演",是著名影音软件公司"讯连科技"的主打产品之一.其主要功能和特点是:1.创新10轨覆迭剪辑及炫粒特效设计,只需简单操 ...

  9. mtk 多国语言翻译工具_多国语言文档工具

    mtk 多国语言翻译工具 With the excellent article by David Hecker on documentation running on SitePoint, it se ...

最新文章

  1. 在pycharm中通过VCS快速提交代码
  2. 计算机方面特长特招进北大,成为科技特长生并不难,CSP普及组三等奖就可以
  3. 音乐会的等待-单调栈
  4. 中文分词之正向最大匹配算法
  5. 【哲学】罗素《哲学问题》,把我从怀疑派拉回来,本能信仰
  6. QUIC 之类的可靠传输协议
  7. java中system_《java中System类》 | 学步园
  8. android模拟器安装及优化(集锦)
  9. 【POJ1177】【HDU1828】【codevs2149】矩形面积周长并
  10. 模块化无人机,不仅配置高,还颜值爆表
  11. 虚拟局域网(VLAN)中端口tagged和untagged在多种情况下的作用
  12. 视频教程-区块链技术通俗讲解-区块链
  13. kmeans聚类理论篇
  14. Mac 系统文件占用内存过大怎么办?
  15. linux上ftp上传文件失败
  16. 第一课 什么是norm?(An Evolutionary Approach to Norms)
  17. MySQL学习笔记——多表查询
  18. 互联网寒冬,那些不怕失业的程序员们,都有什么技能?
  19. js数组与字符串的相互转化
  20. codereview(codereview什么意思)

热门文章

  1. 第11课:动手实战基于 LSTM 轻松生成各种古诗
  2. 【Scala谜题】继承
  3. 资源集 - 收藏集 - 掘金
  4. 防止Ddos攻击脚本
  5. Android Studio修改debug.keystore
  6. 通过shell例子来学习循环结构的语法
  7. 如何求欧拉函数~转载
  8. 编译php7.0.17报错提示 undefined reference to `libiconv_open'
  9. CUDA编程中内存管理机制
  10. Linux安装Nginx使用负载均衡