Question

如果我输入的值是数字，我想管理日志信息。不幸的是，它不起作用，也没有出现任何错误。

以下是从CodePen链接（https://codepen.io/matoung/pen/KBNmPP）中提取的代码段

let button = document.querySelector('.buttonClass');


button.addEventListener('click', function() {
    let myValue = document.querySelector('.inputClass').value;
    if(typeof myValue === 'number'){
        console.log('To jest liczba');
    }
});

.wrapper {
    display: flex;
    justify-content: space-around;
    flex-wrap: wrap;
}

.container-6 {
    border: 1px solid #000;
    align-items: center;
    padding: 40px;
    margin-top: 100px;
}

<html>
<head>
	<title>Random</title>
	<link rel="stylesheet" type="text/css" href="style.css">
	<meta charset="utf-8">
</head>
<body>
<input type="text" class='inputClass' />
<input type="button" value="Wyślij" class="buttonClass"/>
<div class="wrapper">
	<div class="container-6">
		<p>It will be a number</p>
	</div>
	<div class="container-6">
		<p>It will be a string</p>
	</div>
	<div class="container-6">
		<p>It will be a boolean</p>
	</div>
	<div class="container-6">
		<p>It will be an array</p>
	</div>
	<div class="container-6">
		<p>It will be an undefined</p>
	</div>
	<div class="container-6">
		<p>It will be a null</p>
	</div>
</div>
<script type="text/javascript" src="script.js"></script>
</body>
</html>

Answer 1

您可以使用isNaN

检查号码

let button = document.querySelector('.buttonClass');


button.addEventListener('click', function() {
    let myValue = document.querySelector('.inputClass').value;
    
    if(!Number.isNaN(parseInt(myValue))){
        console.log('To jest liczba');
    }
});

.wrapper {
    display: flex;
    justify-content: space-around;
    flex-wrap: wrap;
}

.container-6 {
    border: 1px solid #000;
    align-items: center;
    padding: 40px;
    margin-top: 100px;
}

<html>
<head>
	<title>Random</title>
	<link rel="stylesheet" type="text/css" href="style.css">
	<meta charset="utf-8">
</head>
<body>
<input type="text" class='inputClass' />
<input type="button" value="Wyślij" class="buttonClass"/>
<div class="wrapper">
	<div class="container-6">
		<p>It will be a number</p>
	</div>
	<div class="container-6">
		<p>It will be a string</p>
	</div>
	<div class="container-6">
		<p>It will be a boolean</p>
	</div>
	<div class="container-6">
		<p>It will be an array</p>
	</div>
	<div class="container-6">
		<p>It will be an undefined</p>
	</div>
	<div class="container-6">
		<p>It will be a null</p>
	</div>
</div>
<script type="text/javascript" src="script.js"></script>
</body>
</html>

Answer 2

Hari已经给出了完全正确的答案。但是，如果您希望不仅能够检测到number类型，还可以像这样使用JSON.parse：

button.addEventListener('click', function() {
    let myValue = document.querySelector('.inputClass').value;

    try {
        myValue = JSON.parse(myValue);
    } catch (parseError) {
        // myValue does not hold a valid JSON string, so it must be any arbitrary string.
        // You can choose to define what constitutes as 'undefined' here.
    }

    if (typeof myValue === 'number'){
        console.log('To jest liczba');
    } else if (typeof myValue === 'boolean') {
        console.log('This is a boolean');
    } // etc.
});

Answer 3

我将unary plus operator与parseFloat和isNaN一起使用。

类似的东西：

let number = +myValue;
if (number === parseFloat(myValue) && !isNaN(number)) {
  // is a number, then you can use `number` if you neeed it
}

代码之所以使用这三种方法，是为了涵盖所有情况：

parseFloat最多转换为第一个非数字字符：这意味着12.10px被解析为有效的12.10，其中+"12.10px"返回NaN。
一元运算符将空字符串“”转换为0，其中parseFloat返回NaN –在我们的情况下是正确的。
如果它们都返回NaN，我们必须打电话给isNaN，以免得出错误的结果。

这应该涵盖几乎所有情况。但是，请记住，在JS中，与"0x10"一样，像"0.0314E+2" 这样的字符串是有效数字（16，十六进制）。如果只想使用00.0形式的正则浮点数，则需要一个正则表达式。像这样：

if (/^\d*\.?\d+$/.test(myValue)) {
  // is a number, then you can convert with the unary operator
  let number = +myValue;
}

如果只需要整数，则regexp更直接，只需/^\d+$/。

希望有帮助！

在事件监听器中使用typeof

3 个答案: