如何检查输入的值是反应js中的数字还是字符串？答案

【问题标题】：How to check If the value of an input is number or string in react js?如何检查输入的值是反应js中的数字还是字符串？
【发布时间】：2021-09-01 13:58:18
【问题描述】：

我想检查类型文本输入的值是这样的数字还是字符串：

<input
  type="text"
  onChange={(e) => {
  const value = e.target.value;
    console.log(typeof value);
  }}
/>

但是当我输入文本或数字时，它在这两种情况下都会记录字符串。

如何在 react js 中检查输入类型文本的值是否为数字？

【问题讨论】：

带有type="text" 的<input> 标记的值将始终具有string 的value 属性类型
@Samathingamajig 由于某种原因我不想使用类型编号有没有其他方法来检查值类型？
@Samathingamajig 即使你使用type="number"，输入的值也会是一个字符串。

标签： javascript reactjs validation input

【解决方案1】：

最简单的方法是将字符串转换为数字，然后检查其是否有效。由于输入的值始终是string，即使您使用type="number"，如果您只想输入数字，最好使用它。

您可以使用isNaN(+value)。这里+ 会将字符串转换为数字。

<input
  type="text"
  onChange={(e) => {
    const value = e.target.value;
    console.log(!isNaN(+value)); // true if its a number, false if not
  }}
/>;

一些测试用例：

console.log(!isNaN(+"54"));
console.log(!isNaN(+"23xede"));
console.log(!isNaN(+"test"));

注意：如前所述，这是一种简单的方法，可以通过一些变通方法绕过它，您可以在此处查看强大的解决方案：Check whether variable is number or string in JavaScript

【讨论】：

【解决方案2】：

你可以转换成数字，然后检查它是否是南

isNaN(parseInt('0')) // false
isNaN(parseInt('f')) // true

如 cmets 中所述，parseInt() 将为包含数字的字符串返回一个数字。另一方面，使用 Number 将返回 Nan

isNaN(Number('55')) // false
isNaN(Number('55bob')) // true

【讨论】：

parseInt("56bob") 返回56，而不是NaN
@Samathingamajig 使用 Number("56bob") 的好点子可能更好

【解决方案3】：

因为它是输入元素的 value 属性（并且由于您只检索了一次该值，因此它保留了初始值 - 空字符串。如果你想检查它是否是一个数字，你可以试试这个：

function isNumber() { 
var val = document.getElementById("disc_perc1").value; 
var num = +value; 
if (num == num) { 
    alert("It is a number!"); 
} else { 
    alert("Uh, oh"); 
}

}

【讨论】：