isNaN() 関数を利用します。isNaN([判定する値])
[判定する値]にNaNを与えた場合は
trueが返りますが、文字列を与えた場合にも、文字列の値によってtrueを返す場合があります。。
Number()関数で値を変換する際に、数値でない値が与えられた場合、結果の値はNaNになります。NaNの値を利用して計算をすると、その後の計算結果もすべてNaNの値になるため、NaNを判定して値を補正したい場合があります。Number.isNaN() メソッドを利用します。Number.isNaN([判定する値])
trueが返ります。isNaN() 関数を利用します。isNaN([判定する値])
trueが返りますが、文字列を与えた場合にも、文字列の値によってtrueを返す場合があります。。<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<script type="text/javascript">
function Func() {
var elem = document.getElementById("text1");
var value1 = elem.value;
var value2 = Number(elem.value);
var outElem1 = document.getElementById("output1");
outElem1.innerText = value1;
var outElem2 = document.getElementById("output2");
outElem2.innerText = value2;
var value3 = value2 + 5;
var outElem3 = document.getElementById("output3");
outElem3.innerText = value3;
}
</script>
</head>
<body>
<p>Nan Check</p>
<input id="text1" type="text" /><br />
<button type="button" onclick="Func();">Exec</button><br />
<hr />
<div id="output1"></div>
<div id="output2"></div>
<div id="output3"></div>
</body>
</html>
Number()関数で数値に変換し、値をページに表示します。また、値に5を加算した値もページに表示します。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<script type="text/javascript">
function Func() {
var elem = document.getElementById("text1");
var value1 = elem.value;
var value2 = Number(elem.value);
var outElem1 = document.getElementById("output1");
outElem1.innerText = value1;
var outElem2 = document.getElementById("output2");
outElem2.innerText = value2;
if (Number.isNaN(value2) == true) {
value2 = 0;
}
var value3 = value2 + 5;
var outElem3 = document.getElementById("output3");
outElem3.innerText = value3;
}
</script>
</head>
<body>
<p>Nan Check</p>
<input id="text1" type="text" /><br />
<button type="button" onclick="Func();">Exec</button><br />
<hr />
<div id="output1"></div>
<div id="output2"></div>
<div id="output3"></div>
</body>
</html>
isNaN()関数による判定を追加しています。 if (Number.isNaN(value2) == true) {
value2 = 0;
}
isNaN() 関数と、Number.isNan() メソッドにいろいろな値を与えて戻り値の値を比較します。<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<script type="text/javascript">
function Func() {
var outElem1 = document.getElementById("output1");
outElem1.innerText = "NaN:" + isNaN(NaN);
var outElem2 = document.getElementById("output2");
outElem2.innerText = "8:" + isNaN(8);
var outElem3 = document.getElementById("output3");
outElem3.innerText = "Penguin:" + isNaN("Penguin");
var outElem4 = document.getElementById("output4");
outElem4.innerText = "130:" + isNaN("130");
var outElem5 = document.getElementById("output5");
outElem4.innerText = "42,12:" + isNaN("42,12");
var outElem6 = document.getElementById("output6");
outElem6.innerText = "undefined:" + isNaN(undefined);
var outElem1m = document.getElementById("output1m");
outElem1m.innerText = "NaN:" + Number.isNaN(NaN);
var outElem2m = document.getElementById("output2m");
outElem2m.innerText = "8:" + Number.isNaN(8);
var outElem3m = document.getElementById("output3m");
outElem3m.innerText = "Penguin:" + Number.isNaN("Penguin");
var outElem4m = document.getElementById("output4m");
outElem4m.innerText = "130:" + Number.isNaN("130");
var outElem5m = document.getElementById("output5m");
outElem5m.innerText = "42,12:" + Number.isNaN("42:12");
var outElem6m = document.getElementById("output6m");
outElem6m.innerText = "undefined:" + Number.isNaN(undefined);
}
</script>
</head>
<body>
<p>isNaN return value</p>
<button type="button" onclick="Func();">Exec</button><br />
<div id="output1"></div>
<div id="output2"></div>
<div id="output3"></div>
<div id="output4"></div>
<div id="output5"></div>
<div id="output6"></div>
<hr />
<div id="output1m"></div>
<div id="output2m"></div>
<div id="output3m"></div>
<div id="output4m"></div>
<div id="output5m"></div>
<div id="output6m"></div>
</body>
</html>
| 入力値 | isNaN() の結果 | Number.isNaN() の結果 |
|---|---|---|
| NaN | true | true |
| 8 | false | false |
| "Penguin" | true | false |
| "130" | false | false |
| "42,12" | true | false |
| undefined | true | false |
Number.isNaN() メソッドは、"NaN" の値が入力された場合のみに true を返します。isNaN()関数の場合は、"NaN" の値が入力された場合は true を返しますが、"Penguin" "42,12" といった文字列が入力された場合にも true を返します。
なお、"130"も文字列ですが、この文字列は数値に変換できるため、戻り値は false となります。また、undefined の場合も true を返します。isNaN() 関数はNaN以外の値でもtrueを返す場合があります。
