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 相关文章推荐
Prototype1.6 JS 官方下载地址
Nov 30 Javascript
jquery.validate使用攻略 第二部
Jul 01 Javascript
JavaScript高级程序设计阅读笔记(十六) javascript检测浏览器和操作系统-detect.js
Aug 14 Javascript
innerHTML与jquery里的html()区别介绍
Oct 12 Javascript
解析Javascript中难以理解的11个问题
Dec 09 Javascript
Javascript让DEDECMS告别手写Tag
Sep 01 Javascript
JS+CSS相对定位实现的下拉菜单
Oct 06 Javascript
遍历js中对象的属性和值的实例
Nov 21 Javascript
ng2学习笔记之bootstrap中的component使用教程
Mar 09 Javascript
jQuery实现经典的网页3D轮播图封装功能【附源码下载】
Feb 15 jQuery
微信小程序前端promise封装代码实例
Aug 24 Javascript
React中获取数据的3种方法及优缺点
Feb 18 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中文本操作的类
2007/03/17 PHP
PHPMailer安装方法及简单实例
2008/11/25 PHP
创建配置文件 用PHP写出自己的BLOG系统 2
2010/04/12 PHP
PHP中Session引起的脚本阻塞问题解决办法
2014/04/08 PHP
PDO预处理语句PDOStatement对象使用总结
2014/11/20 PHP
php简单生成随机数的方法
2015/07/30 PHP
PHP文件上传操作实例详解
2016/09/27 PHP
jQuery的几个我们必须了解的特点
2015/05/03 Javascript
谈谈我对JavaScript原型和闭包系列理解(随手笔记6)
2015/12/20 Javascript
sencha ext js 6 快速入门(必看)
2016/06/01 Javascript
Bootstrap基本插件学习笔记之模态对话框(16)
2016/12/08 Javascript
AngularJs 禁止模板缓存的方法
2017/11/28 Javascript
详解ES6中的代理模式——Proxy
2018/01/08 Javascript
写一个移动端惯性滑动&amp;回弹Vue导航栏组件 ly-tab
2018/03/06 Javascript
angular4 获取wifi列表中文显示乱码问题的解决
2018/10/20 Javascript
详解JavaScript函数callee、call、apply的区别
2019/03/08 Javascript
js 数据类型判断的方法
2020/12/03 Javascript
[04:04]显微镜下的DOTA2第六期——电影级别的华丽团战
2014/06/20 DOTA
[05:00]第二届DOTA2亚洲邀请赛主赛事第三天比赛集锦.mp4
2017/04/04 DOTA
浅谈Python中chr、unichr、ord字符函数之间的对比
2016/06/16 Python
Python入门教程之运算符与控制流
2016/08/17 Python
python操作列表的函数使用代码详解
2017/12/28 Python
Tensorflow实现AlexNet卷积神经网络及运算时间评测
2018/05/24 Python
Python socket实现的简单通信功能示例
2018/08/21 Python
python+webdriver自动化环境搭建步骤详解
2019/06/03 Python
Python学习笔记之Django创建第一个数据库模型的方法
2019/08/07 Python
Python datetime模块使用方法小结
2020/06/18 Python
EJB2和EJB3在架构上的不同点
2014/09/29 面试题
WSDL的操作类型主要有几种
2013/07/19 面试题
违反工作纪律检讨书
2014/02/15 职场文书
公司试用期员工自我评价
2014/09/17 职场文书
优秀员工自荐书
2015/03/06 职场文书
运动会加油稿30字
2015/07/21 职场文书
大学生党课感想
2015/08/11 职场文书
vue选项卡切换的实现案例
2022/04/11 Vue.js
virtualenv隔离Python环境的问题解析
2022/06/21 Python