如何在 JavaScript 中格式化保留两位小数的数字？

本教程将教我们如何使用 JavaScript 格式化保留两位小数的数字。格式化数字意味着将数字四舍五入到指定的小数位数。在 JavaScript 中，我们可以使用多种方法来执行格式化操作。其中一些方法如下所示：

  • toFixed() 方法

  • Math.round() 方法

  • Math.floor() 方法

  • Math.ceil() 方法

toFixed() 方法

toFixed() 方法 用于格式化数字，使其在小数点后具有指定位数的数字。它返回数字的字符串表示形式，不使用指数表示法，并且小数点后具有精确的位数。

语法

以下是使用 toFixed() 方法将数字格式化为保留两位小数的语法：

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，即 var fixedNum = 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() 方法会产生不同的结果。您可以尝试不同的数字，并找出哪种方法的结果与其他方法不同？

更新于：2023年10月31日

9.8万+ 次浏览

开启您的职业生涯

通过完成课程获得认证

开始学习
广告