当前位置:首页 > Javascript技术文章 > JavaScript 格式化数字、金额、千分位、保留几位小数、舍入舍去

JavaScript格式化数字、金额、千分位、保留几位小数、舍入舍去的实例代码

  • 发布时间:
  • 作者:码农之家原创
  • 点击:157

这篇文章主要知识点是关于JavaScript、格式化数字、金额、千分位、保留几位小数、舍入舍去、JavaScript实现的数字与字符串转换功能示例 的内容,如果大家想对相关知识点有系统深入的学习,可以参阅以下java相关资源

看透JavaScript:原理、方法与实践

本书由资深软件开发专家撰写,凝聚其多年开发经验,系统、深入、全面地阐释JavaScript,内容涉及流行的Web开发实践,结合实际案例进行讲解,授人以渔。本书内容并不局限于某个具体功能的

查看详情

JavaScript 格式化数字、金额、千分位、保留几位小数、舍入舍去

前端开发中经常会碰到用 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实现的数字与字符串转换功能。分享给大家供大家参考,具体如下:

<!DOCTYPE html>
<html>
<head>
  <title></title>
</head>
<body>
  <script type="text/javascript">
    var print = new Function("x", "document.write(x)");
    var println = new Function("x", "document.write(x + '<br>')");
    var n = 1.23456;
    var str = "123.456";
    println("number to String...");
    /* 加上一个空字符串 */
    println(typeof(n + ""));
    /* 使用 String 函数 */
    println(typeof(String(n)));
    /* 使用 toString() 方法 ,可以提供一个可选的参数,指定转换的基数(2 - 36),默认基数是10 */
    println(typeof n.toString(16));
    println("0x" + n.toString(16)); // 0x1.3c0c1fc8f3238
    /* 把一个数字转换为字符串,并指定小数位数 */
    println(n.toFixed(2));     // 1.23
    /* 指数表示,参数指定小数位数 */
    println(n.toExponential(1));  // 1.2e+0
    /* 参数指定有效数字的个数 */
    println(n.toPrecision(7));   // 1.234560
    println("");
    println("string to number...");
    /* 减去一个数字 0 */
    println(typeof (str - 0));
    /* 使用 Number 函数 */
    println(typeof(Number(str)));
    /* 只转换整数, 忽略舍去非数字部分,可以提供一个参数指定转换的基数(2 ~ 36)*/
    println(parseInt(" 4 line 5 row"));  // 4
    println(parseInt("row 4"));       // NaN
    println(parseInt("1111", 2));      // 15
    println(parseInt("ff", 16));      // 255
    println(parseInt("zz", 36));      // 1295
    /* 转换为浮点数 */
    println(parseFloat("1.23e-2 like"));  // 0.0123
    println(parseFloat("125"));       // 125
  </script>
</body>
</html>

更多关于JavaScript相关内容感兴趣的读者可查看本站专题:《JavaScript数学运算用法总结》、《JavaScript数据结构与算法技巧总结》、《JavaScript数组操作技巧总结》、《JavaScript排序算法总结》、《JavaScript遍历算法与技巧总结》、《JavaScript查找算法技巧总结》及《JavaScript错误与调试技巧总结》

希望本文所述对大家JavaScript程序设计有所帮助。

以上就是本次给大家分享的关于Javascript的全部知识点内容总结,大家还可以在下方相关文章里找到echarts中箱线图的分析与绘、 JavaScript中的call、apply方法、 让JS验证密码不能为空的实、 等javascript文章进一步学习,感谢大家的阅读和支持。

上一篇:关于layui表格的表头不滚动的实例详解

下一篇:小程序中手势滑动效果实现方法

展开 +

收起 -

JavaScript数字处理 相关内容
JavaScript语言精粹

JavaScript曾是全世界非常容易误解的言语,由于它肩负过多的特点,包含槽糕的互动和不成功的设计方案,但伴随着Ajax的来临,JavaScript从极受误会的程序语言演化为十分时髦的言语,这除开好

查看详情
同构JavaScript应用开发 查看详情
HTML5+CSS3+JavaScript从入门到精通

本书以基础知识、示例、实战案例相结合的方式详尽讲述了HTML,CSS,JavaScript及目前最新的前端技术

查看详情
JavaScript前端开发案例教程

JavaScript是这种运用于Web前端开发的开发语言,具备简易、易懂、实用的特性,用JavaScript开发设计网页页面能够提高网页页面的参与性,为客户出示即时的、动态性的互动感受。 《 JavaScript前端

查看详情
精通JavaScript

精通JavaScript(第2版) 是iQuery之父的经典之作,是深入学习JavaScript技术的绝佳教材,涵盖了可重用代码、文档对象模型、Ajax、Web生产工具、AngularJS等内容。作者讲解了JavaScript的发展现状、实用技

查看详情
JavaScript之美

阅读文章这书好像是坐着来与一些JavaScript大师共进午餐,听她们探讨她们现场不断涌现出去的新念头。JavaScript能够说成全世界*异议和别人误会*多的程序语言。许多人企图用别的语言替代它的

查看详情
JavaScript忍者秘籍

这是由jQuery库创始人编写的一本深入剖析JavaScript语言的书,从不同层次讲述了逐步成为JavaScript高手所需的知识,适合具备一定JavaScript基础知识的读者阅读

查看详情
JavaScript数字处理 学习笔记
网友NO.253615

JavaScript字符串转数字的5种方法及遇到的坑

String转换为Number有很多种方式,我可以想到的有5种! parseInt(num); // 默认方式 (没有基数) parseInt(num, 10); // 传入基数 (十位数) parseFloat(num) // 浮点数 Number(num); // Number 构造器 ~~num //按位非 num / 1 // 除一个数 num * 1 // 乘一个数 num - 0 // 减去0 +num // 一元运算符 "+" 选择哪一种呢?什么时候选择它?为什么选择这种它?我们逐一进行分析,并解析每种方式的常见陷阱。 parseInt 根据JsPerf.com的基准测试,大多数浏览器对parseInt的响应最佳。虽然它是最快的方式,但使用preseInt会碰到一些常见陷阱: parseInt('08') // returns 0 部分老浏览器.parseInt('44.jpg') // returns 44 parseInt: 没有传入基数时,默认是传入的基数为10 parseInt(num, 10),如果你不知道num属性的类型,不要使用parseInt进行字符串转数字。 parseFloat 如果你不解析16进制数,这是一个非常好的选择。例如: parseInt(-0xFF) /……

网友NO.979710

JavaScript中transform实现数字翻页效果

效果图: 图(1)初始图 图(2)翻页过程 图(3)翻页结果 代码如下: !doctype htmlhtml lang="en"head meta charset="UTF-8" titletransition/title style #container{ width:500px; height:500px; margin:20px auto; background:#ff0000; -webkit-transiton:background 2s linear,width 2s,height 2s; -moz-transition:background 2s,width 2s,height 2s; -o-transition:background 2s,width 2s,height 2s; -ms-transition:background 2s,width 2s,height 2s; transition:background 2s,width 2s,height 2s; } #container:hover{ background: #00ff00;width:200px;height: 200px;} #my3dspace{ -webkit-perspective:800; -webkit-perspective-origin:50% 50%; overflow: hidden; } #pagegroup{ width: 400px; height: 400px; margin: 0 auto; -webkit-transform-style:preserve-3d; position: relative; } .page{ width: 360px; height: 360px; padding: 20px; background-color: black; color: white; font-size: 360px; font-weight: blod; line-height: 360px; text-align: center; position: absolute; } #page1{ -webkit-transform-orig……

网友NO.863243

JavaScript实现淘宝京东6位数字支付密码效果

京东淘宝的密码输入框功能点 只能输入数字 只能输入6位字符 每次输入一个字符,对应位置的小黑点显示 每次删除一个字符,对应位置的小黑点消失 实现思路 1、写好6位密码输入框的静态样式和html结构 2、将密码输入框input定位到父容器,覆盖之前写好的6位密码输入框区域,并设置为透明 3、虽然设置了密码输入框为透明,但当密码输入框获得焦点的时候,输入框的光标会显示出来,并不是透明状态。为了解决这个问题,暂时想到了两种方法,第一种,利用css将光标也设置为透明,不过这种方法有一定的兼容问题;第二种,当输入框获得焦点的时候,将输入框定位到屏幕外面,用户看不到输入框,自然也就看不到光标在那里一闪一闪了。 4、对于用户只能输入数字的功能,这里用正则表达式就搞定了,如果用户输入了非数字字符,将input输入框的值……

网友NO.984066

JavaScript中的Number数字类型学习笔记

使用IEEE754格式来表示整数和浮点数值。 浮点数值: 该数值中必须包含一个小数点,并且小数点后面必须至少有一位数字。浮点数值需要内存空间是保存整数值的两倍。最高精度是17为小数,但在进行算术运算时其精度远远不如整数。 各种数值类型: 十进制,八进制(在严格模式下无效),十六进制 八进制字面量的第一位必须是0,然后是八进制数字序列(0~7)。如果字面值中的数值超出了范围,那么前导0将被忽略,后面的数值将被当做十进制数来解析 070//56079//79 十六进制字面值的前两位必须是0x,后跟十六进制数字(0~9及A~F)。其中字母A~F可大小也可小写 0xA//10 在进行算术计算时,所有以八进制和十六进制表示的数值最终都将被转换为十进制数值 数值范围: 如果某次计算中的结果中得到了一个超出javascript数值范围的值,那么这个值将被转换为特殊的Infinit……

网友NO.549335

JavaScript中使用Math.floor()方法对数字取整

此方法返回比最大的整数小于或等于参数 语法 Math.floor( x ) ; 下面是参数的详细信息: x : 一个数字 返回值: 返回比最大的整数小于或等于一个数x 例子: htmlheadtitleJavaScript Math floor() Method/title/headbodyscript type="text/javascript"var value = Math.floor(10.3);document.write("First Test Value : " + value ); var value = Math.floor(30.9);document.write("br /Second Test Value : " + value ); var value = Math.floor(-2.9);document.write("br /Third Test Value : " + value ); var value = Math.floor(-2.2);document.write("br /Fourth Test Value : " + value ); /script/body/html 这将产生以下结果: First Test Value : 10Second Test Value : 30Third Test Value : -3Fourth Test Value : -3 ……

<
1
>

Copyright 2018-2020 xz577.com 码农之家

本站所有电子书资源不再提供下载地址,只分享来路

免责声明:网站所有作品均由会员网上搜集共同更新,仅供读者预览及学习交流使用,下载后请24小时内删除

版权投诉 / 书籍推广 / 赞助:QQ:520161757