JS保留两位小数方法总结：四舍五入、截断与补零

本文整理了JavaScript中实现保留两位小数的常见场景与函数写法，并针对相关问题分析进行了详细说明，以下是完整内容。

一、从经典的“四舍五入”算法开始讲解

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

注意：若输入为负数，需先转换为正数进行计算，最后再转换回负数。

此外，分享一个解决四舍五入后保留两位小数的经典方法：


//四舍五入保留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;
}

若想系统深入地学习JavaScript，推荐阅读《JavaScript启示录》PDF原书完整版，这是一本经典的学习资料。

二、JavaScript获取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、JavaScript强制保留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;
}

三、JavaScript保留两位小数并自动补零


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;
 }
}

四、JavaScript取整数、绝对值及四舍五入（可保留两位小数）

JavaScript实现取整数、绝对值及四舍五入（可保留两位小数）的函数定义如下：


<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>

总结

在Web前端开发中，JS数据格式化是常见需求，特别是针对Float类型数据，需特殊处理如保留两位小数及是否四舍五入等问题。以下介绍实现数据格式化保留两位小数的多种方法。

1、JavaScript内置方法toFixed()，该方法可将Number对象四舍五入为指定小数位数的数字。

语法：NumberObject.toFixed(num)，num为必需参数，表示规定小数的位数，取值范围为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>

以上便是关于JavaScript保留两位小数方法的总结内容，感谢您的支持。如果您对JavaScript保留两位小数方法仍有疑问，可在下方留言区进行讨论。

JavaScript保留两位小数的多种实现方案与注意事项