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脚本
Aug 04 Javascript
谷歌浏览器 insertCell与appendChild的区别
Feb 12 Javascript
Jquery Ajax.ashx 高效分页实现代码
Oct 20 Javascript
js面向对象编程之如何实现方法重载
Jul 02 Javascript
输入框过滤非数字的js代码
Sep 18 Javascript
javascript中加var和不加var的区别 你真的懂吗
Jan 06 Javascript
jquery遍历table的tr获取td的值实现方法
May 19 Javascript
关于在Servelet中如何获取当前时间的操作方法
Jun 28 Javascript
对Layer UI 模块化的用法详解
Sep 26 Javascript
VUE渲染后端返回含有script标签的html字符串示例
Oct 28 Javascript
小程序接口的promise化的实现方法
Dec 11 Javascript
Vue中axios拦截器如何单独配置token
Dec 27 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
PHP4实际应用经验篇(1)
2006/10/09 PHP
我用php+mysql写的留言本
2006/10/09 PHP
拖动一个HTML元素
2006/12/22 Javascript
下载站控制介绍字数显示的脚本 显示全部 隐藏介绍等功能
2009/09/19 Javascript
jQuery中的bind绑定事件与文本框改变事件的临时解决方法
2010/08/13 Javascript
jQuery boxy弹出层插件中文演示及使用讲解
2011/02/24 Javascript
Jquery提交表单 Form.js官方插件介绍
2012/03/01 Javascript
js实现广告漂浮效果的小例子
2013/07/02 Javascript
让图片跳跃起来  javascript图片轮播特效
2016/02/16 Javascript
基于Vue过渡状态实例讲解
2017/09/14 Javascript
IE11下使用canvas.toDataURL报SecurityError错误的解决方法
2017/11/19 Javascript
详解Puppeteer前端自动化测试实践
2019/02/21 Javascript
浅谈Vue中render中的h箭头函数
2019/11/07 Javascript
JavaScript自定义超时API代码实例
2020/04/30 Javascript
Vue 根据条件判断van-tab的显示方式
2020/08/03 Javascript
基于openlayers实现角度测量功能
2020/09/28 Javascript
python批量下载图片的三种方法
2013/04/22 Python
Python警察与小偷的实现之一客户端与服务端通信实例
2014/10/09 Python
python实现统计代码行数的方法
2015/05/22 Python
详解Python的Django框架中的中间件
2015/07/24 Python
Python读取网页内容的方法
2015/07/30 Python
Python编程求质数实例代码
2018/01/31 Python
Python实现调用另一个路径下py文件中的函数方法总结
2018/06/07 Python
django中瀑布流写法实例代码
2019/10/14 Python
django-xadmin根据当前登录用户动态设置表单字段默认值方式
2020/03/13 Python
CSS3之transition实现下划线的示例代码
2018/05/30 HTML / CSS
HTML5 canvas基本绘图之绘制阴影效果
2016/06/27 HTML / CSS
美国领先的在线邮轮旅游公司:CruiseDirect
2018/06/07 全球购物
婚礼证婚人证婚词
2014/01/13 职场文书
给校长的建议书600字
2014/05/15 职场文书
我的中国梦演讲稿小学篇
2014/08/19 职场文书
2015年员工试用期工作总结
2014/12/12 职场文书
毕业生爱心捐书倡议书
2015/04/27 职场文书
html实现随机点名器的示例代码
2021/04/02 Javascript
详解MySQL的Seconds_Behind_Master
2021/05/18 MySQL
dubbo集成zipkin获取Traceid的实现
2021/07/26 Java/Android