JavaScript 格式化数字、金额、千分位、保留几位小数、舍入舍去


Posted in Javascript onJuly 23, 2019

前端开发中经常会碰到用 JavaScript?格式化数字,最最常见的是格式化金额,一般格式化金额需要千分位分隔,保留2位小数等等。

简单的功能函数

类似的代码网上有很多:

/**
 * 将数值四舍五入(保留2位小数)后格式化成金额形式
 *
 * @param num 数值(Number或者String)
 * @return 金额格式的字符串,如'1,234,567.45'
 * @type String
 */
function formatCurrency(num) {
  num = num.toString().replace(/\$|\,/g,'');
  if(isNaN(num))
    num = "0";
  sign = (num == (num = Math.abs(num)));
  num = Math.floor(num*100+0.50000000001);
  cents = num%100;
  num = Math.floor(num/100).toString();
  if(cents<10)
  cents = "0" + cents;
  for (var i = 0; i < Math.floor((num.length-(1+i))/3); i++)
  num = num.substring(0,num.length-(4*i+3))+','+
  num.substring(num.length-(4*i+3));
  return (((sign)?'':'-') + num + '.' + cents);
}

或者

function fmoney(s, n) {
  /*
   * 参数说明:
   * s:要格式化的数字
   * n:保留几位小数
   * */
  n = n > 0 && n <= 20 ? n : 2;
  s = parseFloat((s + "").replace(/[^\d\.-]/g, "")).toFixed(n) + "";
  var l = s.split(".")[0].split("").reverse(),
    r = s.split(".")[1];
  t = "";
  for (i = 0; i < l.length; i++) {
    t += l[i] + ((i + 1) % 3 == 0 && (i + 1) != l.length ? "," : "");
  }
  return t.split("").reverse().join("") + "." + r;
}
//调用
fmoney(9.7,2);//9.70
fmoney('12345.675910', 3);//12,345.676

更加完善的功能函数

这些代码基本能很好的运行。不过关系到经济利益的时候,还要考虑舍去或者舍入几厘。大家懂的,每个用户几厘钱可能带来巨大的经济收益。就比如说收手续费,如果一笔手续费计算出来是 3.4521 元,精确到分一般都会收 3.46 元。当然如果是付出去,那可能就是直接舍去了,一般会计算为 3.45 元。

以前收集过类似方法,不过在使用的时候会有BUG,JS 浮点型计算的精度问题。所以抽时间修复了一下:

function number_format(number, decimals, dec_point, thousands_sep,roundtag) {
  /*
  * 参数说明:
  * number:要格式化的数字
  * decimals:保留几位小数
  * dec_point:小数点符号
  * thousands_sep:千分位符号
  * roundtag:舍入参数,默认 "ceil" 向上取,"floor"向下取,"round" 四舍五入
  * */
  number = (number + '').replace(/[^0-9+-Ee.]/g, '');
  roundtag = roundtag || "ceil"; //"ceil","floor","round"
  var n = !isFinite(+number) ? 0 : +number,
    prec = !isFinite(+decimals) ? 0 : Math.abs(decimals),
    sep = (typeof thousands_sep === 'undefined') ? ',' : thousands_sep,
    dec = (typeof dec_point === 'undefined') ? '.' : dec_point,
    s = '',
    toFixedFix = function (n, prec) {
 
      var k = Math.pow(10, prec);
      console.log();
 
      return '' + parseFloat(Math[roundtag](parseFloat((n * k).toFixed(prec*2))).toFixed(prec*2)) / k;
    };
  s = (prec ? toFixedFix(n, prec) : '' + Math.round(n)).split('.');
  var re = /(-?\d+)(\d{3})/;
  while (re.test(s[0])) {
    s[0] = s[0].replace(re, "$1" + sep + "$2");
  }
 
  if ((s[1] || '').length < prec) {
    s[1] = s[1] || '';
    s[1] += new Array(prec - s[1].length + 1).join('0');
  }
  return s.join(dec);
}
console.log(number_format(2, 2, ".", ","))//"2.00"
console.log(number_format(3.7, 2, ".", ","))//"3.70"
console.log(number_format(3, 0, ".", ",")) //"3"
console.log(number_format(9.0312, 2, ".", ","))//"9.03"
console.log(number_format(9.00, 2, ".", ","))//"9.00"
console.log(number_format(39.715001, 2, ".", ",", "floor")) //"39.71"
console.log(number_format(9.7, 2, ".", ","))//"9.70"
console.log(number_format(39.7, 2, ".", ","))//"39.70"
console.log(number_format(9.70001, 2, ".", ","))//"9.71"
console.log(number_format(39.70001, 2, ".", ","))//"39.71"
console.log(number_format(9996.03, 2, ".", ","))//"9996.03"
console.log(number_format(1.797, 3, ".", ",", "floor"))//"1.797"

参数有点多,你可以根据你自己的需求去修改。

推荐的类库 Numeral.js 和 accounting.js

Numeral.js

一个用于格式化和操作数字的JavaScript库。数字可以被格式化为货币,百分比,时间,几个小数位数,千分位等等。 您也可以随时创建自定义格式。

官网及文档:http://numeraljs.com/

GitHub:https://github.com/adamwdraper/Numeral-js

accounting.js

一个轻量级的JavaScript库,用于格式化数字,金额和货币等。

官网及文档:http://openexchangerates.github.io/accounting.js/

GitHub:accounting.js

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
Javascript学习笔记7 原型链的原理
Jan 11 Javascript
基于jquery 的一个progressbar widge
Oct 29 Javascript
图片动画横条广告带上下滚动可自定义图片、链接等等
Oct 20 Javascript
z-blog SyntaxHighlighter 长代码无法换行解决办法(基于jquery)
Nov 18 Javascript
Node.js如何自动审核团队的代码
Jul 20 Javascript
Vue集成Iframe页面的方法示例
Dec 12 Javascript
详解node.js的http模块实例演示
Jul 12 Javascript
解决Vue2.0中使用less给元素添加背景图片出现的问题
Sep 03 Javascript
webpack打包非模块化js的方法
Oct 24 Javascript
微信小程序局部刷新触发整页刷新效果的实现代码
Nov 21 Javascript
layui自定义插件citySelect实现省市区三级联动选择
Jul 26 Javascript
easyUI 实现的后台分页与前台显示功能示例
Jun 01 Javascript
vscode vue 文件模板的配置方法
Jul 23 #Javascript
Vue中对iframe实现keep alive无刷新的方法
Jul 23 #Javascript
jQuery Ajax async=&gt;false异步改为同步时,解决导致浏览器假死的问题
Jul 22 #jQuery
这应该是最详细的响应式系统讲解了
Jul 22 #Javascript
20道JS原理题助你面试一臂之力(必看)
Jul 22 #Javascript
微信小程序webview 脚手架使用详解
Jul 22 #Javascript
koa2 用户注册、登录校验与加盐加密的实现方法
Jul 22 #Javascript
You might like
PHP计划任务之关闭浏览器后仍然继续执行的函数
2010/07/22 PHP
php数组函数序列之array_unique() - 去除数组中重复的元素值
2011/10/29 PHP
详解PHP中的PDO类
2015/07/06 PHP
PHP5中使用mysqli的prepare操作数据库的介绍
2019/03/18 PHP
PHP FileSystem 文件系统常用api整理总结
2019/07/12 PHP
php设计模式之原型模式分析【星际争霸游戏案例】
2020/03/23 PHP
javascript 时间比较实现代码
2009/10/28 Javascript
javascript数组操作总结和属性、方法介绍
2014/04/05 Javascript
jQuery对象和DOM对象之间相互转换的方法介绍
2015/02/28 Javascript
深入理解关于javascript中apply()和call()方法的区别
2016/04/12 Javascript
微信小程序之小豆瓣图书实例
2016/11/30 Javascript
layui.js实现的表单验证功能示例
2017/11/15 Javascript
浅谈React碰到v-if
2018/11/04 Javascript
详解React项目如何修改打包地址(编译输出文件地址)
2019/03/21 Javascript
从理论角度讨论JavaScript闭包
2019/04/03 Javascript
世界上最短的数字判断js代码
2019/09/09 Javascript
只有 20 行的 JavaScript 模板引擎实例详解
2020/05/11 Javascript
取numpy数组的某几行某几列方法
2018/04/03 Python
python把ipynb文件转换成pdf文件过程详解
2019/07/09 Python
简单了解python 生成器 列表推导式 生成器表达式
2019/08/22 Python
keras tensorflow 实现在python下多进程运行
2020/02/06 Python
Python库安装速度过慢解决方案
2020/07/14 Python
python读取excel数据并且画图的实现示例
2021/02/08 Python
CSS3 Flex 弹性布局实例代码详解
2018/11/01 HTML / CSS
意大利领先的奢侈品在线时装零售商:MCLABELS
2020/10/13 全球购物
研究生自我鉴定范文
2013/10/30 职场文书
材料物理专业个人求职信
2013/12/15 职场文书
岗位廉政承诺书
2014/03/27 职场文书
2014银行领导班子群众路线对照检查材料思想汇报
2014/09/17 职场文书
2015年党员公开承诺书范文
2015/01/22 职场文书
全国法制宣传日活动总结
2015/05/05 职场文书
2015年底工作总结范文
2015/05/15 职场文书
赢在执行观后感
2015/06/16 职场文书
保险公司岗前培训工作总结
2015/10/24 职场文书
护理心得体会范文
2016/01/22 职场文书
详细介绍python操作RabbitMq
2022/04/12 Python