极客教程JavaScript 如何格式化浮点数
格式化浮点数意味着将数字四舍五入到给定的小数位数、向上取整、向下取整等操作。下面是用于格式化浮点数的许多操作：
- Math.ceil()方法
- float.toFixed()方法
- Math.round()方法
- Math.floor()方法
- float.toExponential()方法
- number.toPrecision()方法
Math.ceil()、float.toFixed()和Math.round()方法
所有这些方法都类似，并且给出相同的输出。Math.ceil()和Math.round()的实现完全相同，但Math.round()函数用于将数字舍入到最接近的整数。
示例：
<!DOCTYPE html>
<html>
<head>
<title>
How to format a float
value in javascript ?
</title>
</head>
<body>
<h1 style="color:green;">
GeeksforGeeks
</h1>
<h3>
Format a float value
6.56759 in JavaScript
</h3>
<p id="d1"></p>
<p id="d2"></p>
<p id="d3"></p>
<p id="d4"></p>
<p id="d5"></p>
<script>
var n = 6.56759;
// Rounds to next highest integer
document.getElementById("d1").innerHTML
= "Math.ceil(n) = " + Math.ceil(n)
+ "<br />Math.round(n) = " + Math.round(n)
+ "<br />n.toFixed() = " + n.toFixed();
// Rounds to the highest decimal upto one point
document.getElementById("d2").innerHTML
= "Math.ceil(n*10)/10 = " + Math.ceil(n*10)/10
+ "<br />Math.round(n*10)/10 = "
+ Math.round(n*10)/10
+ "<br />n.toFixed(1) = " + n.toFixed(1);
// Rounds to the highest decimal upto two points
document.getElementById("d3").innerHTML
= "Math.ceil(n*100)/100 = "
+ Math.ceil(n*100)/100
+ "<br />Math.round(n*100)/100 = "
+ Math.round(n*100)/100
+ "<br />n.toFixed(2) = " + n.toFixed(2);
// Rounds to the highest decimal upto three points
document.getElementById("d4").innerHTML
= "Math.ceil(n*1000)/1000 = "
+ Math.ceil(n*1000)/1000
+ "<br />Math.round(n*1000)/1000 = "
+ Math.round(n*1000)/1000
+ "<br />n.toFixed(3) = " + n.toFixed(3);
// Rounds to the specified length, as the
// manipulation stops to the original float
document.getElementById("d5").innerHTML
= "Math.ceil(n*1000000000)/1000000000 = "
+ Math.ceil(n*1000000000)/1000000000
+ "<br />Math.round(n*1000000000)/1000000000 = "
+ Math.round(n*1000000000)/1000000000
+ "<br />n.toFixed(9) = " + n.toFixed(9);
</script>
</body>
</html>
输出：
Math.floor() 方法
Math.floor() 函数用于将传递的数字参数向下舍入为最接近的整数，即朝着较小的值方向舍入。
示例：
<!DOCTYPE html>
<html>
<head>
<title>
How to format a float
value in javascript ?
</title>
</head>
<body>
<h1 style="color:green;">
GeeksforGeeks
</h1>
<h3>
Format a float value
6.56759 in JavaScript
</h3>
<p id="d1"></p>
<p id="d2"></p>
<p id="d3"></p>
<script>
var n = 6.56759;
// Rounds off to the floor value
document.getElementById("d1").innerHTML
= "Math.floor(n) = " + Math.floor(n);
// Rounds off upto one decimal place
document.getElementById("d2").innerHTML
= "Math.floor(n*10)/10 = "
+ Math.floor(n*10)/10;
// Rounds off upto two decimal place
document.getElementById("d3").innerHTML
= "Math.floor(n*100)/100 = "
+ Math.floor(n*100)/100;
</script>
</body>
</html>
输出：
float.toExponential()方法
toExponential()方法用于将一个数转换为指数形式。它返回一个表示Number对象的指数表示形式的字符串。
示例：
<!DOCTYPE html>
<html>
<head>
<title>
How to format a float
value in javascript ?
</title>
</head>
<body>
<h1 style="color:green;">
GeeksforGeeks
</h1>
<h3>
Format a float number
in JavaScript
</h3>
<p id="GFG"></p>
<script>
var n1 = 5.569999999999999999999;
var n2 = 5.569999999999;
// The complexity of the float results
// in its conversion
document.getElementById("GFG").innerHTML
= "n1.toExponential() = "
+ n1.toExponential()
+ "<br />n2.toExponential() = "
+ n2.toExponential();
</script>
</body>
</html>
输出：
number.toPrecision() 方法
toPrecision() 方法用于将数字格式化为特定的精度或长度。如果格式化后的数字需要比原始数字更多的数字位数，则会添加小数和空位以创建指定的长度。
示例：
<!DOCTYPE html>
<html>
<head>
<title>
How to format a float
value in javascript ?
</title>
</head>
<body>
<h1 style="color:green;">
GeeksforGeeks
</h1>
<h3>
Format a float number
in JavaScript
</h3>
<p id="d1"></p>
<p id="d2"></p>
<p id="d3"></p>
<script>
var n1 = 13.3714;
var n2 = 0.0016588874;
var n3 = 13.3714;
document.getElementById("d1").innerHTML
= "n1.toPrecision() = " + n1.toPrecision()
+ "<br \>n1.toPrecision(2) = " + n1.toPrecision(2)
+ "<br \>n1.toPrecision(3) = " + n1.toPrecision(3)
+ "<br \>n1.toPrecision(10) = " + n1.toPrecision(10);
document.getElementById("d2").innerHTML
= "n2.toPrecision() = " + n2.toPrecision()
+ "<br \>n2.toPrecision(2) = " + n2.toPrecision(2)
+ "<br \>n2.toPrecision(3) = " + n2.toPrecision(3)
+ "<br \>n2.toPrecision(10) = " + n2.toPrecision(10);
document.getElementById("d3").innerHTML
= "n3.toPrecision() = " + n3.toPrecision()
+ "<br \>n3.toPrecision(2) = " + n3.toPrecision(2)
+ "<br \>n3.toPrecision(3) = " + n3.toPrecision(3)
+ "<br \>n3.toPrecision(10) = " + n3.toPrecision(10);
</script>
</body>
</html>
输出:
