如何使用 JavaScript 检查数字是否有小数位或是否是整数?
在本教程中,我们将讨论如何使用 JavaScript 检查数字是小数还是整数。在 JavaScript 中,我们可以使用内置方法以及用户自定义方法来检查数字是否有小数位或是否是整数。我们将详细讨论所有这些方法。让我们看看可以使用哪些方法来完成此任务。
以下方法对于检查数字是小数还是整数非常有用:
使用 Math.floor() 方法.
使用 isInteger() 方法.
使用 isDecimal() 用户自定义函数.
让我们逐一详细讨论上述所有方法,并提供代码示例:
使用 Math.floor() 方法
floor() 方法是 JavaScript 中Math 对象的内置方法。floor 方法将数字作为参数,如果传入的数字是小数,则返回该数字的较低值或底值。因此,我们可以将给定数字与 floor 方法返回的底值进行比较,如果这两个值相同,则该数字是整数,否则该数字是小数。
语法
以下语法用于在 JavaScript 中实现 Math 对象的 floor() 方法:
Math.floor(value);
让我们了解在检查数字是整数还是小数时 floor 方法的实际实现。
示例
下面的示例将说明使用Math.floor() 方法检查数字:
<!DOCTYPE html> <html> <body> <p>Enter a number below and click "Click to check" button to check if number has a decimale place or it's a whole number.</p> <input type="number" id="input"> <p id="result"></p> <button onclick="check()">Click to check</button> <script> var result = document.getElementById("result"); var inp = document.getElementById("input"); function check() { var num = inp.value; var number = Number(num); if (number === Math.floor(number)) { result.innerHTML = number + " is a whole number."; } else { result.innerHTML = number + " is a decimal number."; } } </script> </body> </html>
在上面的示例中,我们使用了Math.floor() 方法来检查数字是整数还是小数。
使用isInteger() 方法
isInteger() 方法是 JavaScript 中 Number 对象的内置方法。isInteger() 方法接收一个数字并检查该数字是否为整数。如果数字是整数,则返回 true,否则返回 false。
语法
以下语法用于实现 Number 对象的isInteger() 方法:
Number.isInteger(value);
让我们通过代码示例了解isInteger() 方法的实际实现。
示例
下面的代码示例将解释如何使用 isInteger() 方法检查值:
<!DOCTYPE html> <html> <body> <h3>Check if a number has a decimal place or it’s a whole number</h3> <p>Enter a number and click the below button</p> <input type="number" id="input"> <p id="result"></p> <button onclick="check()">Click to check</button> <script> var result = document.getElementById("result"); var inp = document.getElementById("input"); function check() { var num = inp.value; var number = Number(num); if (Number.isInteger(number)) { result.innerHTML = "<b> The given number " + number + " is a whole number not a decimal number. </b>"; } else { result.innerHTML = "<b> The given number " + number + " is a decimal number not a whole number. </b>"; } } </script> </body> </html>
在上面的示例中,我们使用了isInteger() 方法来检查数字是整数还是小数,我们可以看到代码正在运行。
使用 isDecimal() - 用户自定义函数
在 JavaScript 中,我们可以定义自己的方法来检查用户输入的数字是小数还是整数。在此方法中,我们将通过将其除以 1 来检查数字,如果它能被 1 整除,则函数将返回值为 0,并且该数字是整数。否则,该数字是小数。
语法
以下语法将详细说明如何将数字除以 1 来检查它是否是整数或小数:
var varName = number; var check = varName % 1;
让我们通过代码示例了解如何实际实现 isDecimal() 方法。
算法
步骤 1 - 在第一步中,我们将定义一个类型为数字的输入标签,以从用户那里获取数字输入。
步骤 2 - 在此步骤中,我们将定义isDecimal() 方法,该方法将输入数字作为参数,如果数字是小数则返回 true,否则返回 false。
步骤 3 - 在下一步中,我们将为与按钮关联的 onclick 事件定义回调函数。
步骤 4 - 在最后一步中,我们将编写回调函数的逻辑,并在其中使用isDecimal() 方法来检查数字是小数还是整数。
示例
下面的示例是上述算法的代码实现,它解释了isDecimal() 如何检查输入数字是小数还是整数:
<!DOCTYPE html> <html> <body> <h2>Checking using the isDecimal() method.</h2> <p>Enter a number and check if a number has a decimal place or it’s a whole number</p> <input type="number" id="input"> <p id="result"></p> <button onclick="check()">Click to check</button> <script> var result = document.getElementById("result"); var inp = document.getElementById("input"); function isDecimal(num) { return (num % 1); } function check() { var num = inp.value; var number = Number(num); if (!isDecimal(number)) { result.innerHTML = "<b> The given number " + number + " is a whole number not a decimal number. </b>"; } else { result.innerHTML = "<b> The given number " + number + " is a decimal number not a whole number. </b>"; } } </script> </body> </html>
在这个例子中,我们使用了isDecimal() 方法来检查输入数字是小数还是整数。在这个例子中,我们使用了Number() 方法,这是因为我们从输入标签获得的值默认情况下是字符串形式,所以为了将其转换为数字,我们使用了Number() 方法。
因此,在本教程中,我们讨论了三种检查数字是小数还是整数的方法。我们已经通过实际实现并为每种方法提供相关的代码示例来了解所有这些方法。每当需要检查数字是否有小数位或是否是整数时,都可以使用这些方法。