HTML CSS JAVASCRIPT BOOTSTRAP JQUERY PHP SQL PYTHON PYTHON2 JAVA C C++ C# Linux AI 教程库 参考手册 技术文章 测验 练习 HOWTO FAQ

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

javascriptweb developmentfront end technology

在本教程中，我们将了解如何使用 JavaScript 将浮点数格式化为所需格式。格式化浮点数意味着将数字四舍五入到给定的小数位。我们将详细讨论下面列出的各种方法 -

  • Math.round() 方法

  • Math.floor() 方法

  • Math.ceil() 方法

  • toFixed() 方法

  • toPrecision() 方法

Math.round() 方法

Math.round() 方法将数字四舍五入为最接近的整数。我们可以使用此方法格式化为最接近的整数，也可以使用一些小数。要使用小数进行四舍五入，请将数字乘以小数的 10 次方，然后四舍五入，然后除以小数的 10 次方。

语法

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

Math.round(num) // 格式化为最接近的整数
let n = 10**d ;
Math.round(num*n)/n // 格式化为小数点后 d 位。

此处 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) // 格式化为小于或等于 num 的最大整数。
let n = 10**d ;
Math.floor(num*n)/n // 格式化为小数点后 d 位。

此处 num 是要格式化为 d 个小数的浮点数。

示例 3

在下面的示例中，我们将浮点数格式化为小于或等于浮点数的最大整数，并带有 1 和 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) // 格式化为大于或等于 num 的最小整数。
let n = 10**d ;
Math.ceil(num*n)/n // 格式化为小数点后 d 位

此处 num 是要格式化为 d 位小数的浮点数。

示例 4

在下面的示例中，我们将浮点数格式化为大于或等于浮点数的最小整数，并带有 1 和 3 位小数。我们使用 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() 方法清楚地看到结果的差异。NumbertoFixed() 和 toPrecision() 方法的工作方式类似，但您可以看到这两种方法的结果的明显差异。

相关文章

打印 下一节 ❯❮ 上一节