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 相关文章推荐
dojo 之基础篇(二)之从服务器读取数据
Mar 24 Javascript
CSS+Jquery实现页面圆角框方法大全
Dec 24 Javascript
jquery 倒计时效果实现秒杀思路
Sep 11 Javascript
Js和JQuery获取鼠标指针坐标的实现代码分享
May 25 Javascript
jQuery插件zepto.js简单实现tab切换
Jun 16 Javascript
JavaScript数组对象实现增加一个返回随机元素的方法
Jul 27 Javascript
jquery UI Datepicker时间控件的使用方法(基础版)
Nov 07 Javascript
js实现继承的5种方式
Dec 01 Javascript
详解原生js实现offset方法
Jun 15 Javascript
微信小程序使用image组件显示图片的方法【附源码下载】
Dec 08 Javascript
vue使用vue-i18n实现国际化的实现代码
Apr 08 Javascript
三步搞定:Vue.js调用Android原生操作
Sep 07 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
如何解决CI框架的Disallowed Key Characters错误提示
2013/07/05 PHP
php获取文件夹路径内的图片以及分页显示示例
2014/03/11 PHP
thinkphp在模型中自动完成session赋值示例代码
2014/09/09 PHP
php从身份证获取性别和出生年月
2017/02/09 PHP
PHP写API输出的时用echo的原因详解
2019/04/28 PHP
laravel 5.5 关闭token的3种实现方式
2019/10/24 PHP
一个JS小玩意 几个属性相加不能超过一个特定值.
2009/09/29 Javascript
JS中Iframe之间传值的方法
2013/03/11 Javascript
详解JavaScript正则表达式中的global属性的使用
2015/06/16 Javascript
JavaScript的模块化开发框架Sea.js上手指南
2016/05/12 Javascript
Js类的静态方法与实例方法区分及jQuery拓展的两种方法
2016/06/03 Javascript
基于casperjs和resemble.js实现一个像素对比服务详解
2018/01/10 Javascript
iView-admin 动态路由问题的解决方法
2018/10/03 Javascript
详解mpvue开发微信小程序基础知识
2019/09/23 Javascript
vue引入静态js文件的方法
2020/06/20 Javascript
在vue中对数组值变化的监听与重新响应渲染操作
2020/07/17 Javascript
python实现简易数码时钟
2021/02/19 Python
python使用正则筛选信用卡
2019/01/27 Python
Pytorch to(device)用法
2020/01/08 Python
Python 常用日期处理 -- calendar 与 dateutil 模块的使用
2020/09/02 Python
python音频处理的示例详解
2020/12/23 Python
AutoShack.com加拿大:北美主要的汽车零部件零售商
2019/07/24 全球购物
哥德堡通行证:Gothenburg Pass
2019/12/09 全球购物
网游商务专员求职信
2013/10/15 职场文书
行政前台岗位职责
2013/12/04 职场文书
应用数学专业求职信
2014/03/14 职场文书
会计系毕业生求职信
2014/05/28 职场文书
小学雷锋月活动总结
2014/07/03 职场文书
乡镇保密工作责任书
2014/07/28 职场文书
终止劳动合同证明书样本
2014/11/19 职场文书
司机个人年终总结
2015/03/03 职场文书
共青团员自我评价
2015/03/10 职场文书
2015年外联部工作总结
2015/04/03 职场文书
sqlserver2017共享功能目录路径不可改的解决方法
2021/04/16 SQL Server
Python爬虫实战之爬取京东商品数据并实实现数据可视化
2021/06/07 Python
Android Studio实现简易进制转换计算器
2022/05/20 Java/Android