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网页关闭时提醒效果脚本
Oct 22 Javascript
Extjs Ajax 乱码问题解决方案
Apr 15 Javascript
JavaScript操作cookie类实例
Mar 31 Javascript
JSON字符串转JSON对象
Jul 31 Javascript
jQuery实现带幻灯的tab滑动切换风格菜单代码
Aug 27 Javascript
Bootstrap每天必学之导航条
Nov 27 Javascript
jQuery判断checkbox选中状态
May 12 Javascript
使用JQuery实现图片轮播效果的实例(推荐)
Oct 24 jQuery
JavaScript如何判断input数据类型
Feb 06 Javascript
JavaScript中this的学习笔记及用法整理
Feb 17 Javascript
React中获取数据的3种方法及优缺点
Feb 18 Javascript
JavaScript 实现继承的几种方式
Feb 19 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
德生PL990,目前市面上唯一一款便携式插卡蓝牙全波段高性能收音机
2021/03/02 无线电
JavaScript的Function详细
2006/11/14 Javascript
JavaScript中使用Object.prototype.toString判断是否为数组
2015/04/01 Javascript
JavaScript实现非常简单实用的下拉菜单效果
2015/08/27 Javascript
同步文本框内容JS代码实现
2016/08/04 Javascript
基于WebUploader的文件上传js插件
2016/08/19 Javascript
JS实现拖动滚动条评分的效果代码分享
2016/09/29 Javascript
简单实现vue验证码60秒倒计时功能
2017/10/11 Javascript
Webpack实战加载SVG的方法
2017/12/26 Javascript
axios发送post请求springMVC接收不到参数的解决方法
2018/03/05 Javascript
promise和co搭配生成器函数方式解决js代码异步流程的比较
2018/05/25 Javascript
webpack分离css单独打包的方法
2018/06/12 Javascript
详解vue+webpack+express中间件接口使用
2018/07/17 Javascript
vue项目中使用Svg的方法
2018/10/24 Javascript
es6中使用map简化复杂条件判断操作实例详解
2020/02/19 Javascript
JavaScript 常见的继承方式汇总
2020/09/17 Javascript
python求pi的方法
2014/10/08 Python
用python写的一个wordpress的采集程序
2016/02/27 Python
深入学习Python中的装饰器使用
2016/06/20 Python
Diango + uwsgi + nginx项目部署的全过程(可外网访问)
2018/04/22 Python
关于python多重赋值的小问题
2019/04/17 Python
django使用django-apscheduler 实现定时任务的例子
2019/07/20 Python
基于Python 中函数的 收集参数 机制
2019/12/21 Python
Python中base64与xml取值结合问题
2019/12/22 Python
python多项式拟合之np.polyfit 和 np.polyld详解
2020/02/18 Python
4款Python 类型检查工具,你选择哪个呢?
2020/10/30 Python
python从ftp获取文件并下载到本地
2020/12/05 Python
CSS3教程(4):网页边框和网页文字阴影
2009/04/02 HTML / CSS
阿波罗盒子:Apollo Box
2017/08/14 全球购物
澳大利亚领先的宠物用品商店:VetSupply
2017/09/08 全球购物
个人简历自我评价范文
2014/02/04 职场文书
先进事迹报告会主持词
2014/04/02 职场文书
小学运动会开幕词
2016/03/04 职场文书
新手初学Java网络编程
2021/07/07 Java/Android
MySQL数据库 安全管理
2022/05/06 MySQL
Zabbix6通过ODBC方式监控Oracle 19C的详细过程
2022/09/23 Servers