資料結構
網路
關係資料庫管理系統
作業系統
Java
MS Excel
iOS
HTML
CSS
Android
Python
C 程式設計
C++
C#
MongoDB
MySQL
Javascript
PHP
物理學
化學
生物學
數學
英語
經濟學
心理學
社會學
服裝設計
法律學如何在 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() 方法的工作方式類似，但您可以在這兩種方法的結果中看到明顯的差異。
5K+ 瀏覽量
