如何在 JavaScript 中格式化带有两位小数的数字?
本教程将教我们如何使用 JavaScript 格式化带有两位小数的数字。格式化数字意味着将数字四舍五入到指定的小数位。在 JavaScript 中，我们可以应用许多方法来执行格式化。其中一些列如下 -
toFixed() 方法
Math.round() 方法
Math.floor() 方法
Math.ceil() 方法
toFixed() 方法
toFixed() 方法格式化小数点右侧具有特定位数的数字。它返回不使用指数表示法且小数点后位数准确的数字的字符串表示形式。
语法
以下是使用 toFixed() 方法将数字保留到小数点后 2 位的语法格式 −
number.toFixed(2);
在上述语法中，toFixed() 是在 JavaScript 中格式化带有两位小数的数字的方法，而 number 是要格式化为两位小数的数字。
算法
- 步骤 1 - 声明一个名为"num"的变量并为该变量分配一个数字。
- 步骤 2 - 计算num.toFixed(2)。结果采用两位小数的格式。
- 步骤 3 - 在用户屏幕上显示结果
示例 1
下面的示例将说明 JavaScript 中格式化前后的数字。
<html> <body> <h2>JavaScript Number toFixed()</h2> <p>format a number with two decimals:</h3> <p id="number">Number before formatting:<br></p> <p id="result">Number After formatting:<br></p> <script> var number = 9.1291754; document.getElementById("number").innerHTML += number; var fixedNum = number.toFixed(2); document.getElementById("result").innerHTML += fixedNum; </script> </body> </html>
在上面的程序中，我们使用number.toFixed(2)将数字四舍五入为具有两位小数的数字。9.1291754将四舍五入为(9.13)。
Math.round()
Math.round()方法返回四舍五入到最接近的数字的给定数值表达式。我们将使用该方法格式化具有两位小数的数字。请查看以下语法。
语法
以下是在JavaScript中四舍五入给定数字的语法-
Math.round(num*100)/100;
在上述语法中，Math.round() 是格式化数字的方法，num 是要格式化为两位小数的数字。
算法
- 步骤 1 - 作为第一步，我们将创建一个名为"number"的变量并为其分配一个值。
- 步骤 2 - 现在我们计算 Math.round() 并将其分配给新变量 fixedNum，即 varfixedNum = Math.round(number*100)/100。
- 步骤 3 - 最后一步或第三步将在用户屏幕上显示结果
示例 2
下面的示例将说明之前和之后的数字使用 JavaScript 进行格式化。
<html> <body> <h3>JavaScript Math.round()</h3> <p>format a number with two decimals</h3> <p id="number">Number before formatting:<br></p> <p id="result">Number after formatting:<br></p> <script> const number = 9.1291754; document.getElementById("number").innerHTML += number; const fixedNum = Math.round(number*100)/100; document.getElementById("result").innerHTML += fixedNum; </script> </body> </html>
在上面的程序中，我们使用了 Math.round() 方法，该方法将数字四舍五入为具有两位小数的数字。9.1291754 将四舍五入为 (9.13)。
Math.floor() 方法
Math.floor() 方法返回小于或等于其参数的最大整数。但是我们可以使用此方法格式化带有两位小数的数字。
语法
以下是使用 Math.floor() 方法格式化带有两位小数的数字的语法 -
Math.floor(num*100)/100
这里num是要格式化为两位小数的数字
示例 3
在下面的示例中，我们将 9.1291754 格式化为带有两位小数的数字。我们使用 Math.floor() 方法来格式化数字。
<html> <body> <h3>JavaScript Math.floor() Method</h3> <p>Format a nubmer with 2 decimals:</p> <p id="input"></p> <p id="result"></p> <script> var num = 9.1291754; document.getElementById("input").innerHTML = "Number before Format:<br> " + num; var formatNum = Math.floor(num*100)/100; document.getElementById("result").innerHTML = "Number after format :<br> " + formatNum; </script> </body> </html>
Math.ceil() 方法
Math.ceil() 方法返回大于或等于该数字的最小整数。我们可以应用此方法将数字格式化为带有两位小数的数字。
语法
以下是将数字格式化为两位 小数的语法 -
Math.ceil(num*100)/100
这里 num 是要格式化为 两位小数的浮点数
示例 4
在下面的示例中，我们将 9.1291754 格式化为带有两位小数的数字我们使用 Math.ceil() 方法来格式化数字。
<html> <body> <h3>JavaScript Math.ceil() Method</h3> <p>Format a number with 2 decimals:</p> <p id="input"></p> <p id="result"></p> <script> const num = 9.1291754 ; document.getElementById("input").innerHTML = "Number before Format:<br> " + num; const formatNum = Math.ceil(num*100)/100; document.getElementById("result").innerHTML = "Number after format :<br> " + formatNum; </script> </body> </html>
在本教程中，我们讨论了四种格式化带有两个小数点的数字的方法。请注意不同示例中结果之间的差异。注意为什么 Math.floor() 方法会给出不同的结果。您可以尝试使用不同的数字并找出哪种方法给出的结果与其他方法不同吗?
