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 操作cookies及正确使用cookies的属性
Oct 15 Javascript
JQuery 1.6发布 性能提升,同时包含大量破坏性变更
May 10 Javascript
jQuery操作input type=radio的实现代码
Jun 14 Javascript
javascript算法题 求任意一个1-9位不重复的N位数在该组合中的大小排列序号
Jul 21 Javascript
EasyUI中在表单提交之前进行验证
Jul 19 Javascript
vue-resource 拦截器(interceptor)的使用详解
Jul 04 Javascript
js封装成插件_Canvas统计图插件编写实例
Sep 12 Javascript
AngularJS中controller控制器继承的使用方法
Nov 03 Javascript
详解Axios 如何取消已发送的请求
Oct 20 Javascript
js使用Promise实现简单的Ajax缓存
Nov 14 Javascript
JavaScript剩余操作符Rest Operator详解
Jul 20 Javascript
vue之debounce属性被移除及处理详解
Nov 13 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
现磨咖啡骗局!现磨咖啡=新鲜咖啡?现磨咖啡背后的猫腻你不懂!
2019/03/28 冲泡冲煮
Smarty结合Ajax实现无刷新留言本实例
2007/01/02 PHP
php set_magic_quotes_runtime() 函数过时解决方法
2010/07/08 PHP
php循环检测目录是否存在并创建(循环创建目录)
2011/01/06 PHP
php获取远程文件内容的函数
2015/11/02 PHP
node在两个div之间移动,用ztree实现
2013/03/06 Javascript
js控制的回到页面顶端goTop的代码实现
2013/03/20 Javascript
SpringMVC返回json数据的三种方式
2015/12/10 Javascript
聊一聊JavaScript作用域和作用域链
2016/05/03 Javascript
动态加载js、css的简单实现代码
2016/05/26 Javascript
Vue.js学习教程之列表渲染详解
2017/05/17 Javascript
深入理解React中何时使用箭头函数
2017/08/23 Javascript
通过vue-cli来学习修改Webpack多环境配置和发布问题
2017/12/22 Javascript
JavaScript实现封闭区域布尔运算的示例代码
2018/06/25 Javascript
浅析vue.js数组的变异方法
2018/06/30 Javascript
详解vue-cli+es6引入es5写的js(两种方法)
2019/04/19 Javascript
vue input输入框关键字筛选检索列表数据展示
2020/10/26 Javascript
vue+element模态框中新增模态框和删除功能
2019/06/11 Javascript
vue实现公告栏文字上下滚动效果的示例代码
2020/06/16 Javascript
[01:31](回顾)杀出重围,决战TI之巅
2014/07/01 DOTA
深入浅析python中的多进程、多线程、协程
2016/06/22 Python
python统计多维数组的行数和列数实例
2018/06/23 Python
Python如何实现强制数据类型转换
2019/11/22 Python
Pytorch中Tensor与各种图像格式的相互转化详解
2019/12/26 Python
django中cookiecutter的使用教程
2020/12/03 Python
百思买美国官网:Best Buy
2016/07/28 全球购物
2013年入党人员的自我鉴定
2013/10/25 职场文书
竞争上岗实施方案
2014/03/21 职场文书
岗位职责说明书
2014/05/07 职场文书
奥巴马竞选演讲稿
2014/05/15 职场文书
2014年节能降耗工作总结
2014/12/11 职场文书
贪污检举信范文
2015/03/02 职场文书
电子表的操作介绍说明书
2019/10/28 职场文书
Python实现byte转integer
2021/06/03 Python
vue使用element-ui按需引入
2022/05/20 Vue.js
VMware虚拟机安装 Windows Server 2022的详细图文教程
2022/09/23 Servers