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实例教程(19) 使用HoTMetal(3)
Dec 23 Javascript
JavaScript中的闭包原理分析
Mar 08 Javascript
jquery文字上下滚动的实现方法
Mar 22 Javascript
一个JS的日期格式化算法示例
Jul 31 Javascript
javascript中的Function.prototye.bind
Jun 25 Javascript
一览画面点击复选框后获取多个id值的方法
May 30 Javascript
JavaScript知识点总结(六)之JavaScript判断变量数据类型
May 31 Javascript
微信小程序动态显示项目倒计时效果
Jun 13 Javascript
微信小程序获取位置展示地图并标注信息的实例代码
Sep 01 Javascript
JS函数进阶之继承用法实例分析
Jan 15 Javascript
深入浅析JavaScript中的in关键字和for-in循环
Apr 20 Javascript
如何构建一个Vue插件并生成npm包
Oct 26 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
世界第一个无线广播电台 KDKA
2021/03/01 无线电
PHP中使用gettext来支持多语言的方法
2011/05/02 PHP
PHP封装分页函数实现文本分页和数字分页
2014/10/23 PHP
php插件Xajax使用方法详解
2017/08/31 PHP
extjs 为某个事件设置拦截器
2010/01/15 Javascript
HTML中的setCapture和releaseCapture使用介绍
2012/03/21 Javascript
javascript 树形导航菜单实例代码
2013/08/13 Javascript
AngularJS语法详解
2015/01/23 Javascript
使用jquery/js获取iframe父子级、同级获取元素的方法
2016/08/05 Javascript
JS简单实现表格排序功能示例
2016/12/20 Javascript
JS中Array数组学习总结
2017/01/18 Javascript
SVG实现时钟效果
2018/07/17 Javascript
vue仿ios列表左划删除
2019/09/26 Javascript
Python连接mssql数据库编码问题解决方法
2015/01/01 Python
pygame学习笔记(2):画点的三种方法和动画实例
2015/04/15 Python
Python模块包中__init__.py文件功能分析
2016/06/14 Python
git进行版本控制心得详谈
2017/12/10 Python
Python并发之多进程的方法实例代码
2018/08/15 Python
Python----数据预处理代码实例
2019/03/20 Python
Python代码实现删除一个list里面重复元素的方法
2019/04/02 Python
TensorFlow keras卷积神经网络 添加L2正则化方式
2020/05/22 Python
python用分数表示矩阵的方法实例
2021/01/11 Python
详解三种方式实现平滑滚动页面到顶部的功能
2019/04/23 HTML / CSS
台湾菁英交友:结识黄金单身的台湾人
2018/01/22 全球购物
JD Sports西班牙:英国领先的运动服装公司
2020/01/06 全球购物
应用化学专业职业生涯规划书
2013/12/31 职场文书
爱国演讲稿400字
2014/05/07 职场文书
献爱心大型公益活动策划方案
2014/09/15 职场文书
教师党员自我评议不足范文
2014/10/19 职场文书
就业推荐表自我评价范文
2015/03/02 职场文书
小学数学教师研修感悟
2015/11/18 职场文书
读《钢铁是怎样炼成的》有感:百炼方成钢
2019/11/05 职场文书
深度学习小工程练习之垃圾分类详解
2021/04/14 Python
golang在GRPC中设置client的超时时间
2021/04/27 Golang
简单聊一聊SQL注入及防止SQL注入
2022/03/23 MySQL
Python正则表达式中flags参数的实例详解
2022/04/01 Python