如何在 JavaScript 中格式化浮点数？

在本教程中，我们将学习如何使用 JavaScript 将浮点数格式化成所需的格式。格式化浮点数意味着将数字四舍五入到指定的十进制位数。我们将详细讨论以下各种方法：

  • Math.round() 方法

  • Math.floor() 方法

  • Math.ceil() 方法

  • toFixed() 方法

  • toPrecision() 方法

Math.round() 方法

Math.round() 方法将数字四舍五入到最接近的整数。我们可以使用此方法将数字四舍五入到最接近的整数，也可以保留一些小数位。要保留小数位，请将数字乘以 10 的小数位次幂，然后四舍五入，最后再除以 10 的小数位次幂。

语法

以下是使用 Math.round() 方法格式化浮点数的语法：

Math.round(num) // format to nearest integer
let n = 10**d ;
Math.round(num*n)/n // format to d decimal place.

这里 num 是要格式化为 d 个小数位的浮点数。

算法

  • 步骤 1 - 声明一个变量并将浮点数赋值给该变量。
  • 步骤 2 - 应用 Math.round() 方法来格式化浮点数。
  • 步骤 3 - 在用户屏幕上显示结果。

示例 1

将浮点数格式化为最接近的整数。

在下面的示例中，我们使用 Math.round() 方法将浮点数格式化为最接近的整数。

<html>
<body>
   <h3>JavaScript Math.round() Method</h3>
   <p>format a float to nearest integer.</p>
   <p id="result">final result:<br></p>
   <script>
      var number = 4.8754;
      var roundNum = Math.round(number);
      document.getElementById("result").innerHTML = "Math.round(4.8754) = " + roundNum;
   </script>
</body>
</html>

在上面的程序中，我们使用了 Math.round() 方法，该方法将数值表达式四舍五入到最接近的整数。4.8754 将向下舍入为 5。

示例 2

保留 n 个小数位的浮点数。

在下面的示例中，我们使用 Math.round() 方法将浮点数格式化为保留 n 个小数位。我们将数字格式化为保留一位、两位和五位小数。

<html>
<body>
   <h3>JavaScript Math.round() Method</h3>
   <p>Format the float with n decimals</p>
   <p id="result"></p>
   <script>
      let resultDiv = document.getElementById("result")
      const number = 9.1931754;
      const roundNum = Math.round(number*10)/10;
      resultDiv.innerHTML += "With 1 decimal: " + roundNum;
      resultDiv.innerHTML += "<br>With 2 decimals: " + Math.round(number*100)/100;
      resultDiv.innerHTML += "<br>With 5 decimals: " + Math.round(number*100000)/100000;
   </script>
</body>
</html>

Math.floor() 方法

Math.floor() 方法返回小于或等于其参数的最大整数。我们可以使用此方法将浮点数格式化为最接近的整数或保留一些小数位。

语法

以下是使用 Math.floor() 方法格式化浮点数的语法：

Math.floor(num) // format to greatest integer less than or equal to num.
let n = 10**d ;
Math.floor(num*n)/n // format to d decimal place.

这里 num 是要格式化为 d 个小数位的浮点数。

示例 3

在下面的示例中，我们将浮点数格式化为小于或等于该浮点数的最大整数，并保留一位和小数位。我们使用 Math.floor() 方法来格式化浮点数。

<html>
<body>
   <h3>JavaScript Math.floor() Method</h3>
   <p>Format a float (3.31754) with n decimals:</p>
   <p id="result"></p>
   <script>
      let resultDiv = document.getElementById("result");
      var number = 3.31754;
      var floorNum = Math.floor(number);
      resultDiv.innerHTML += "To nearest integer: " + floorNum;
      resultDiv.innerHTML += "<br>With 1 decimal: " + Math.floor(number*10)/10;
      resultDiv.innerHTML += "<br>With 3 decimals : " + Math.floor(number*1000)/1000;
   </script>
</body>
</html>

Math.ceil() 方法

Math.ceil() 方法返回大于或等于浮点数的最小整数。我们应该应用此方法来格式化浮点数保留一些小数位，以及格式化为大于或等于浮点数的最小整数。

语法

以下是使用 Math.ceil() 方法格式化浮点数的语法：

Math.ceil(num) // format to smallest integer greater than or equal to num.
let n = 10**d ;
Math.ceil(num*n)/n // format to d decimal place

这里 num 是要格式化为 d 个小数位的浮点数。

示例 4

在下面的示例中，我们将浮点数格式化为大于或等于该浮点数的最小整数，并保留一位和小数位。我们使用 Math.ceil() 方法来格式化浮点数。

<html>
<body>
   <h3>JavaScript Math.ceil() Method</h3>
   <p>Format a float (3.31754) with n decimals:</p>
   <p id="result"></p>
   <script>
      let resultDiv = document.getElementById("result");
      var number = 3.31754;
      var floorNum = Math.ceil(number);
      resultDiv.innerHTML += "To nearest integer: " + floorNum;
      resultDiv.innerHTML += "<br>With 1 decimal: " + Math.ceil(number*10)/10;
      resultDiv.innerHTML += "<br>With 3 decimals : " + Math.ceil(number*1000)/1000;
   </script>
</body>
</html>

请注意示例 3 和示例 4 中输出结果的差异。

Number toFixed() 方法

Number toFixed() 方法将数字四舍五入到指定的十进制位数。它将数字转换为字符串。如果小数位数高于数字本身，它会添加零。

语法

以下是使用 toFixed() 方法格式化浮点数并指定小数位的语法：

num.toFixed(n);

这里浮点数 num 将格式化为 n 个小数位。如果参数 n 未提供，则 num 将格式化为 最接近的整数。

示例 5

在下面的示例中，我们使用 toFixed() 方法将 8.131754 格式化为指定的小数位。

<html>
<body>
   <h2>JavaScript Number toFixed() Method</h2>
   <p>Format 8.131754 to secified decimals:</p>
   <p id="result"></p>
   <script>
      let resultDiv = document.getElementById("result");
      const number = 8.131754;
      var fixedNum = number.toFixed();
      resultDiv.innerHTML += "number.toFixed() = " + fixedNum;
      resultDiv.innerHTML += "<br>number.toFixed(1) = " + number.toFixed(1);
      resultDiv.innerHTML += "<br>number.toFixed(2) = " + number.toFixed(2);
      resultDiv.innerHTML += "<br>number.toFixed(3) = " + number.toFixed(3);
      resultDiv.innerHTML += "<br>number.toFixed(5) = " + number.toFixed(5);
      resultDiv.innerHTML += "<br>number.toFixed(10) = " + number.toFixed(10);
   </script>
</body>
</html>

Number toPrecision() 方法

Number toPrecision() 方法用于将数值表达式格式化到一定的长度。

语法

以下是 toPrecision() 方法的语法：

num.toPrecision(l);

这里 num 将格式化为指定长度 l。

示例 6

在下面的示例中，我们使用 toPrecision() 方法将 8.131754 格式化为指定的小数位。

<html>
<body>
   <h2>JavaScript Number toPrecision() Method</h2>
   <p>Format 8.131754 to secified decimals:</p>
   <p id="result"></p>
   <script>
      let resultDiv = document.getElementById("result");
      const number = 8.131754;
      var fixedNum = number.toPrecision();
      resultDiv.innerHTML += "number.toPrecision() = " + fixedNum;
      resultDiv.innerHTML += "<br>number.toPrecision(1) = " + number.toPrecision(1);
      resultDiv.innerHTML += "<br>number.toPrecision(2) = " + number.toPrecision(2);
      resultDiv.innerHTML += "<br>number.toPrecision(3) = " + number.toPrecision(3);
      resultDiv.innerHTML += "<br>number.toPrecision(5) = " + number.toPrecision(5);
      resultDiv.innerHTML += "<br>number.toPrecision(10) = " + number.toPrecision(10);
   </script>
</body>
</html>

在本教程中，我们讨论了五种将浮点数格式化到指定小数位的方法。当我们将浮点数格式化为指定小数位时，Math.round()、floor() 和 ceil() 方法的工作方式相似。您可以使用 floor() 和 ceil() 方法清楚地看到结果的差异。Number toFixed() 和 toPrecision() 方法的工作方式相似，但您可以在这两种方法的结果中看到明显的差异。

更新于：2022年9月5日

5K+ 次浏览

开启您的 职业生涯

完成课程获得认证

开始学习
广告