文档章节

js保留两位小数方法总结

孟飞阳
 孟飞阳
发布于 06/19 12:03
字数 1659
阅读 5
收藏 0
点赞 0
评论 0

本文是小编针对js保留两位小数这个大家经常遇到的经典问题整理了在各种情况下的函数写法以及遇到问题的分析,以下是全部内容:

一、我们首先从经典的“四舍五入”算法讲起

1、四舍五入的情况

var num =2.446242342;
num = num.toFixed(2); // 输出结果为 2.45


2、不四舍五入

第一种,先把小数边整数:

Math.floor(15.7784514000 * 100) / 100 // 输出结果为 15.77


第二种,当作字符串,使用正则匹配:

Number(15.7784514000.toString().match(/^\d+(?:\.\d{0,2})?/)) // 输出结果为 15.77,不能用于整数如 10 必须写为10.0000


注意:如果是负数,请先转换为正数再计算,最后转回负数

再分享一个经典的解决四舍五入问题后js保留两位小数的方法:

//四舍五入保留2位小数(若第二位小数为0,则保留一位小数)

function keepTwoDecimal(num) {

 var result = parseFloat(num);

 if (isNaN(result)) {

 alert('传递参数错误,请检查!');

 return false;

 }

 result = Math.round(num * 100) / 100;

 return result;

}

//四舍五入保留2位小数(不够位数,则用0替补)

function keepTwoDecimalFull(num) {

 var result = parseFloat(num);

 if (isNaN(result)) {

 alert('传递参数错误,请检查!');

 return false;

 }

 result = Math.round(num * 100) / 100;

 var s_x = result.toString();

 var pos_decimal = s_x.indexOf('.');

 if (pos_decimal < 0) {

 pos_decimal = s_x.length;

 s_x += '.';

 }

 while (s_x.length <= pos_decimal + 2) {

 s_x += '0';

 }

 return s_x;

}

二、Js取float型小数点后两位数的方法

<script type="text/javascript">

  //保留两位小数

  //功能:将浮点数四舍五入,取小数点后2位

  function toDecimal(x) {

   var f = parseFloat(x);

   if (isNaN(f)) {

    return;

   }

   f = Math.round(x*100)/100;

   return f;

  }

  

  //制保留2位小数,如:2,会在2后面补上00.即2.00

  function toDecimal2(x) {

   var f = parseFloat(x);

   if (isNaN(f)) {

    return false;

   }

   var f = Math.round(x*100)/100;

   var s = f.toString();

   var rs = s.indexOf('.');

   if (rs < 0) {

    rs = s.length;

    s += '.';

   }

   while (s.length <= rs + 2) {

    s += '0';

   }

   return s;

  }

    

  function fomatFloat(src,pos){ 

    return Math.round(src*Math.pow(10, pos))/Math.pow(10, pos);  

  }

  //四舍五入

  alert("保留2位小数:" + toDecimal(3.14159267));

  alert("强制保留2位小数:" + toDecimal2(3.14159267));

  alert("保留2位小数:" + toDecimal(3.14559267));

  alert("强制保留2位小数:" + toDecimal2(3.15159267));

  alert("保留2位小数:" + fomatFloat(3.14559267, 2));

  alert("保留1位小数:" + fomatFloat(3.15159267, 1));

    

  //五舍六入

  alert("保留2位小数:" + 1000.003.toFixed(2));

  alert("保留1位小数:" + 1000.08.toFixed(1));

  alert("保留1位小数:" + 1000.04.toFixed(1));

  alert("保留1位小数:" + 1000.05.toFixed(1));



  //科学计数

  alert(3.1415.toExponential(2));

  alert(3.1455.toExponential(2));

  alert(3.1445.toExponential(2));

  alert(3.1465.toExponential(2));

  alert(3.1665.toExponential(1));

  //精确到n位,不含n位

  alert("精确到小数点第2位" + 3.1415.toPrecision(2));

  alert("精确到小数点第3位" + 3.1465.toPrecision(3));

  alert("精确到小数点第2位" + 3.1415.toPrecision(2));

  alert("精确到小数点第2位" + 3.1455.toPrecision(2));

  alert("精确到小数点第5位" + 3.141592679287.toPrecision(5));

 </script>


用Javascript取float型小数点后两位,例22.127456取成22.13,如何做?

1.丢弃小数部分,保留整数部分

parseInt(5/2)


2.向上取整,有小数就整数部分加1

Math.ceil(5/2)


3,四舍五入.

Math.round(5/2)


4,向下取整

Math.floor(5/2)


另类的方法

1. 最笨的办法

function get()

{

  var s = 22.127456 + "";

  var str = s.substring(0,s.indexOf(".") + 3);

  alert(str);

}


2. 正则表达式效果不错

<script type="text/javascript">

onload = function(){

  var a = "23.456322";

  var aNew;

  var re = /([0-9]+.[0-9]{2})[0-9]*/;

  aNew = a.replace(re,"$1");

  alert(aNew);

}

</script>


3. 他就比较聪明了

<script>

var num=22.127456;

alert( Math.round(num*100)/100);

</script>


4.会用新鲜东西的朋友....... 但是需要 IE5.5+才支持。

5.js保留2位小数(强制)

对于小数点位数大于2位的,用上面的函数没问题,但是如果小于2位的,比如:changeTwoDecimal(3.1),将返回3.1,如果你一定需要3.10这样的格式,那么需要下面的这个函数:

function changeTwoDecimal_f(x) {

  var f_x = parseFloat(x);

  if (isNaN(f_x)) {

    alert('function:changeTwoDecimal->parameter error');

    return false;

  }

  var f_x = Math.round(x * 100) / 100;

  var s_x = f_x.toString();

  var pos_decimal = s_x.indexOf('.');

  if (pos_decimal < 0) {

    pos_decimal = s_x.length;

    s_x += '.';

  }

  while (s_x.length <= pos_decimal + 2) {

    s_x += '0';

  }

  return s_x;

}


三、js保留两位小数,自动补充零

function returnFloat(value){

 var value=Math.round(parseFloat(value)*100)/100;

 var xsd=value.toString().split(".");

 if(xsd.length==1){

 value=value.toString()+".00";

 return value;

 }

 if(xsd.length>1){

 if(xsd[1].length<2){

 value=value.toString()+"0";

 }

 return value;

 }

}


四、JS取整数,js取绝对值,js四舍五入(可保留两位小数)

JS取整数,js取绝对值,js四舍五入(可保留两位小数)函数如下:

<SCRIPT language=javascript>

<!--

function jsMath()

{

    document.write(Math.floor(5.80) + "<br>");//取整或下舍入

    document.write(Math.round(5.80) + "<br>");//四舍五入,取整数

    document.write(Math.round((5.80*100)/100) + "<br>");//四舍五入,保留两位小数

    document.write(Math.ceil(5.10) + "<br>");//上舍入

    document.write(Math.abs(-5.80) + "<br>");//取绝对值

    document.write(Math.max(55,58) + "<br>");//返回两个值中最大数

    document.write(Math.min(55,58) + "<br>");//返回两个值中最小数

}

-->

</SCRIPT>

<div>

<script>jsMath();</script>

</div>


总结

JS数据格式化是在进行web前端开发时常碰到的事情,特别是在数据类型为Float的数据就需要特殊处理,如保留两位小数、小数点后的数据是否需要四舍五入等等。下面就来介绍实现数据格式化保留两位小数的多种方法。

1、JS自带的方法toFixed(),toFixed() 方法可把 Number 四舍五入为指定小数位数的数字。

语法:NumberObject.toFixed(num),mun是必需的参数,即规定小数的位数,是 0 ~ 20 之间的值,包括 0 和 20,有些实现可以支持更大的数值范围。如果省略了该参数,将用 0 代替,所以toFixed() 方法可以实现保留2位、3位、4位等等,取决于num的数值。

返回值:返回 NumberObject 的字符串表示,不采用指数计数法,小数点后有固定的 num 位数字。如果必要,该数字会被舍入,也可以用 0 补足,以便它达到指定的长度。如果 num 大于 le+21,则该方法只调用 NumberObject.toString(),返回采用指数计数法表示的字符串。

当 num 太小或太大时抛出异常 RangeError。0 ~ 20 之间的值不会引发该异常。有些实现支持更大范围或更小范围内的值。

当调用该方法的对象不是 Number 时抛出 TypeError 异常。

<script type=”text/javascript”>

var num = new Number(13.376954);

document.write (num.toFixed(2))

</script>

输出:13.38


2、自定义函数实现小数保留并四舍五入。

function roundFun(numberRound,roundDigit) { //四舍五入,保留位数为roundDigit

if (numberRound>=0){

var tempNumber = parseInt((numberRound * Math.pow(10,roundDigit)+0.5))/Math.pow(10,roundDigit);

return tempNumber;

} else{

numberRound1=-numberRound;

var tempNumber = parseInt((numberRound1 * Math.pow(10,roundDigit)+0.5))/Math.pow(10,roundDigit);

return -tempNumber;

}

}


然后调用roundFun()这个函数就可以了。如roundFun('13.376954′,2);当然返回的结果跟第一种方法是一样的。

3、通过函数截取,截取到小数点后面第几位,当然这种方法就没有四舍五入了。

<script type=”text/javascript”>

tmp = 13.376954″

result = tmp.substr(0,tmp.indexOf(“.”)+2);

alert(result);

</script>

 

© 著作权归作者所有

共有 人打赏支持
孟飞阳
粉丝 202
博文 918
码字总数 536300
作品 5
朝阳
个人站长
JS保留两位小数 四舍五入函数

JS保留两位小数 四舍五入函数的小例子。 js 四舍五入函数 toFixed(),里面的参数 就是保留小数的位数。 <script language="javascript"> document.write("<h1>JS保留两位小数例子</h1><br>......

mysoftsky
2014/03/29
0
0
使用Highcharts结合PHP与Mysql生成饼状图

[转]使用Highcharts结合PHP与Mysql生成饼状图 我们在做复杂的数据统计功能时会用到饼状图,饼状图用整个圆表示总体的数量或整体值1,用圆内各个扇形的大小表示各部分数量或该部分占总体的百分...

考拉睡
2013/05/31
0
0
JavaScript 四则运算(加减乘除小数运算)避免损失精度

在javascript中,当你使用小数进行加减乘除运算时,你会发现,所得到的结果有时后面带有长长的一段小数,使运算变得复杂,并且影响计算结果。上网查询了一下原因,大致如下:在javascript中,...

IceRainYWC
2013/01/22
0
4
JS格式化数字金额用逗号隔开保留两位小数(转)

JS格式化数字金额只留两位小数。写了个格式化函数。 可以控制小数位数,自动四舍五入。 js格式化金额的实例详解。 例如: 12345格式化为12,345.00 12345.6格式化为12,345.60 12345.67格式化为...

mysoftsky
2014/03/29
0
0
AngularJs学习笔记--expression

一、Angular表达式 vs. Js 表达式   这很容易让人将angular视图表达式联想为javascript表达式,但这并不完全正确,因为angular不是通过javascript的eval()对表达式进行求值。你可以将angul...

武文海
2015/02/06
0
0
JavaScript如何实现大数的运算

对于非常大或非常小的数,可以用科学记数法表示浮点值。采用科学记数法,可以把一个数表示为数字加e/E,后面加乘以10的倍数,如: 进行特别大的数的加减运算,可以使用字符串+科学记数法的方...

前端届的科比
2014/09/07
0
0
《javascript语言精粹》读书笔记(四)

本篇对这本书的附录进行摘要。 附录A:糟粕 A.1全局变量 全局变量是javascript所有糟糕特性中最糟糕的。 全局变量是在所有作用域中均可见的变量。如果某些全局变量碰巧和子程序中的变量名称相...

倪闯
2015/03/16
0
0
细说JavaScript数据类型及转换

细说JavaScript数据类型及转换 JavaScript数据类型 1.Boolean(布尔) 布尔:(值类型)var b1=true;//布尔类型 2.Number(数字) 数值:(值类型)var n1=3.1415926;//数值类型 n1.toFixed...

开元中国2015
2015/07/13
0
0
input使用javascript限制输入带小数的数字

如题,网上找了很多都不太好实现。我的实现需求如下: 1、如果输入数字不带小数点那么自动加入两位小数,如:输入5,替换为5.00 2、输入5.,替换为5.00 3、输入5.1,替换为5.10 4、输入非数字...

easonjim
2015/09/29
0
0
WEB前端开发学习:你思考过为什么JavaScript计算浮点数不准确吗?

Web前端开发工程师是一个很新的职业,是从事Web前端开发工作的工程师。主要进行网站开发,优化,完善的工作。网页制作是Web 1.0时代的产物,那时网站的主要内容都是静态的,用户使用网站的行...

web前端小辰
06/03
0
0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

实现异步有哪些方法

有哪些方法可以实现异步呢? 方式一:java 线程池 示例: @Test public final void test_ThreadPool() throws InterruptedException { ScheduledThreadPoolExecutor scheduledThre......

黄威
今天
0
0
linux服务器修改mtu值优化cpu

一、jumbo frames 相关 1、什么是jumbo frames Jumbo frames 是指比标准Ethernet Frames长的frame,即比1518/1522 bit大的frames,Jumbo frame的大小是每个设备厂商规定的,不属于IEEE标准;...

六库科技
今天
0
0
牛客网刷题

1. 二维数组中的查找(难度:易) 题目描述 在一个二维数组中(每个一维数组的长度相同),每一行都按照从左到右递增的顺序排序,每一列都按照从上到下递增的顺序排序。请完成一个函数,输入...

大不了敲一辈子代码
今天
0
0
linux系统的任务计划、服务管理

linux任务计划cron 在linux下,有时候要在我们不在的时候执行一项命令,或启动一个脚本,可以使用任务计划cron功能。 任务计划要用crontab命令完成 选项: -u 指定某个用户,不加-u表示当前用...

黄昏残影
昨天
0
0
设计模式:单例模式

单例模式的定义是确保某个类在任何情况下都只有一个实例,并且需要提供一个全局的访问点供调用者访问该实例的一种模式。 实现以上模式基于以下必须遵守的两点: 1.构造方法私有化 2.提供一个...

人觉非常君
昨天
0
0
《Linux Perf Master》Edition 0.4 发布

在线阅读:https://riboseyim.gitbook.io/perf 在线阅读:https://www.gitbook.com/book/riboseyim/linux-perf-master/details 百度网盘【pdf、mobi、ePub】:https://pan.baidu.com/s/1C20T......

RiboseYim
昨天
1
0
conda 换源

https://mirrors.tuna.tsinghua.edu.cn/help/anaconda/ conda config --add channels https://mirrors.tuna.tsinghua.edu.cn/anaconda/pkgs/free/conda config --add channels https://mir......

阿豪boy
昨天
1
0
Confluence 6 安装补丁类文件

Atlassian 支持或者 Atlassian 缺陷修复小组可能针对有一些关键问题会提供补丁来解决这些问题,但是这些问题还没有放到下一个更新版本中。这些问题将会使用 Class 类文件同时在官方 Jira bug...

honeymose
昨天
0
0
非常实用的IDEA插件之总结

1、Alibaba Java Coding Guidelines 经过247天的持续研发,阿里巴巴于10月14日在杭州云栖大会上,正式发布众所期待的《阿里巴巴Java开发规约》扫描插件!该插件由阿里巴巴P3C项目组研发。P3C...

Gibbons
昨天
1
0
Tomcat介绍,安装jdk,安装tomcat,配置Tomcat监听80端口

Tomcat介绍 Tomcat是Apache软件基金会(Apache Software Foundation)的Jakarta项目中的一个核心项目,由Apache、Sun和其他一些公司及个人共同开发而成。 java程序写的网站用tomcat+jdk来运行...

TaoXu
昨天
0
0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

返回顶部
顶部