如何在 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日

98K+ 浏览量

开启您的 职业生涯

通过完成课程获得认证

开始学习
广告