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 Event学习第四章 传统的事件注册模型
Feb 07 Javascript
jQuery div层的放大与缩小简单实现代码
Mar 28 Javascript
使用js+jquery实现无限极联动
May 23 Javascript
关于extjs4如何获取grid修改后的数据的问题
Aug 07 Javascript
jquery监听div内容的变化具体实现思路
Nov 04 Javascript
使用JQuery在线制作ppt并在线演示源码特效
Sep 08 Javascript
基于JavaScript实现div层跟随滚动条滑动
Jan 12 Javascript
快速解决jquery.touchSwipe左右滑动和垂直滚动条冲突
Apr 15 Javascript
vue结合Echarts实现点击高亮效果的示例
Mar 17 Javascript
Vue项目中使用WebUploader实现文件上传的方法
Jul 21 Javascript
layui 阻止图片上传的实例(before方法)
Sep 26 Javascript
分享几个JavaScript运算符的使用技巧
Apr 24 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中文乱码怎么办如何让浏览器自动识别utf-8
2014/01/15 PHP
zen cart实现订单中增加paypal中预留电话的方法
2016/07/12 PHP
PHP页面间传递值和保持值的方法
2016/08/24 PHP
会自动逐行上升的文本框
2006/06/30 Javascript
JQuery UI皮肤定制
2009/07/27 Javascript
JSON 教程 json入门学习笔记
2020/09/22 Javascript
DOM和XMLHttpRequest对象的属性和方法整理
2012/01/04 Javascript
用js实现控件的隐藏及style.visibility的使用
2013/06/14 Javascript
JavaScript DOM节点添加示例
2014/07/16 Javascript
javascript实现iframe框架延时加载的方法
2014/10/30 Javascript
javascript结合Canvas 实现简易的圆形时钟
2015/03/11 Javascript
JavaScript操作DOM元素的childNodes和children区别
2015/04/01 Javascript
JavaScript实现DIV层拖动及动态增加新层的方法
2015/05/12 Javascript
JQuery实现图片轮播效果
2015/09/15 Javascript
jquery及js实现动态加载js文件的方法
2016/01/21 Javascript
利用D3.js实现最简单的柱状图示例代码
2016/12/09 Javascript
jQuery命名空间与闭包用法示例
2017/01/12 Javascript
js上传图片预览的实现方法
2017/05/09 Javascript
Vue引用Swiper4插件无法重写分页器样式的解决方法
2018/09/27 Javascript
常见的浏览器存储方式(cookie、localStorage、sessionStorage)
2019/05/07 Javascript
改进 JavaScript 和 Rust 的互操作性并深入认识 wasm-bindgen 组件
2019/07/13 Javascript
layui实现checkbox的目录树tree的例子
2019/09/12 Javascript
itchat和matplotlib的结合使用爬取微信信息的实例
2017/08/25 Python
python3+pyqt5+itchat微信定时发送消息的方法
2019/02/20 Python
python多线程同步实例教程
2019/08/11 Python
利用Python如何实时检测自身内存占用
2020/05/09 Python
TensorFlow的环境配置与安装教程详解(win10+GeForce GTX1060+CUDA 9.0+cuDNN7.3+tensorflow-gpu 1.12.0+python3.5.5)
2020/06/22 Python
公司财务工作总结的自我评价
2013/11/23 职场文书
产品质量保证书范本
2015/02/27 职场文书
留学推荐信(中英文版)
2015/03/26 职场文书
教师工作证明范本
2015/06/12 职场文书
军训决心书范文
2015/09/22 职场文书
反腐倡廉心得体会2016
2016/01/13 职场文书
《工作是最好的修行》读后感3篇
2019/12/13 职场文书
Mysql忘记密码解决方法
2022/02/12 MySQL
python接口测试返回数据为字典取值方式
2022/02/12 Python