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 相关文章推荐
jQueryPad 实用的jQuery测试工具(支持IE,chrome,FF)
May 22 Javascript
javascript(js)的小数点乘法除法问题详解
Mar 07 Javascript
Javascript控制div属性动态变化实例分析
Oct 08 Javascript
javascript实现密码验证
Nov 10 Javascript
AngularJS中的按需加载ocLazyLoad示例
Jan 11 Javascript
微信小程序访问node.js接口服务器搭建教程
Apr 25 Javascript
在vue里面设置全局变量或数据的方法
Mar 09 Javascript
小程序click-scroll组件设计
Jun 18 Javascript
react PropTypes校验传递的值操作示例
Apr 28 Javascript
详解JavaScript 作用域
Jul 14 Javascript
node.js使用express-fileupload中间件实现文件上传
Jul 16 Javascript
Vue Mint UI mt-swipe的使用方式
Jun 05 Vue.js
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的错误信息
2006/10/09 PHP
CI(CodeIgniter)框架配置
2014/06/10 PHP
PHP获取文件夹大小函数用法实例
2015/07/01 PHP
PHP面向对象程序设计类的定义与用法简单示例
2016/12/27 PHP
PHP的mysqli_stat()函数讲解
2019/01/23 PHP
基于Jquery的标签智能验证实现代码
2010/12/27 Javascript
js和jquery中循环的退出和继续下一个循环
2014/09/03 Javascript
javascript实现表单提交后,提交按钮不可用的方法
2015/04/18 Javascript
jQuery中$(function() {});问题详解
2015/08/10 Javascript
基于Arcgis for javascript实现百度地图ABCD marker的效果
2015/09/12 Javascript
AngularJS实现分页显示数据库信息
2016/07/01 Javascript
整理关于Bootstrap警示框的慕课笔记
2017/03/29 Javascript
jQuery实现百度登录框的动态切换效果
2017/04/21 jQuery
通过js实现压缩图片上传功能
2020/02/25 Javascript
Nuxt默认模板、默认布局和自定义错误页面的实现
2020/05/11 Javascript
vue动态设置路由权限的主要思路
2021/01/13 Vue.js
[49:31]TFT vs Mski Supermajor小组赛C组 BO3 第一场 6.3
2018/06/04 DOTA
状态机的概念和在Python下使用状态机的教程
2015/04/11 Python
python冒泡排序简单实现方法
2015/07/09 Python
Django项目实战之用户头像上传与访问的示例
2018/04/21 Python
python 日志增量抓取实现方法
2018/04/28 Python
Python解析命令行读取参数之argparse模块
2019/07/26 Python
Python读取JSON数据操作实例解析
2020/05/18 Python
python3.6.8 + pycharm + PyQt5 环境搭建的图文教程
2020/06/11 Python
python判断字符串以什么结尾的实例方法
2020/09/18 Python
HTML5的Geolocation地理位置定位API使用教程
2016/05/12 HTML / CSS
基于 HTML5 的 WebGL 3D 版俄罗斯方块的示例代码
2018/05/28 HTML / CSS
美国在线纱线商店:Darn Good Yarn
2019/03/20 全球购物
运动会广播稿80字
2014/01/23 职场文书
大学运动会通讯稿
2014/01/28 职场文书
地质灾害防治方案
2014/05/14 职场文书
解放思想演讲稿
2014/09/11 职场文书
音乐课外活动总结
2015/05/09 职场文书
2015年审计人员工作总结
2015/05/26 职场文书
某某店铺的开业庆典主持词范本
2019/11/25 职场文书
科学家研发出新型速效酶,可在 24 小时内降解塑料制品
2022/04/29 数码科技