webサイト制作の勉強|2017月7月クラスブログ

webサイト制作の勉強に関する解説ブログです。

javascriptでの型変換と数値判定「isNaN() 関数」

javascriptでは文字列と数値は明確に区別されています。
扱う値が文字列と数値では結果が全く変わってしまうので、常に型のチェックをする必要があります。


文字列を数値型に型変換するには主にNumber(), parseInt(), parseFloat()の3種類があります。
3つとも文字列を数値型に変換する、という事では一緒ですが、それぞれ変換する手順などが違う為、注意が必要です。

  • Number()

数字以外を含む文字列を引数に指定するとNaNを返すので注意が必要。

  • parseInt()

文字列を整数に変換し、実数の場合は小数点以下を切り捨てる。

  • parseFloat()

文字列を実数に変換する。引数に数字以外の文字が含まれている場合は無視される。

parseInt()

ここではparseInt()の使い方を覚えましょう。


parseInt('123'); // 123(整数)
parseInt('2.8'); // 2(小数点以下を切り捨てる)
parseInt('123a'); // 123(数字以外は無視)

<h1>入力された値を整数に変換する</h1>
<p><button onClick="action()">ボタンを押すと実行</button></p>
<p id="ans">ここに表示する</p>
<script>
function action(){
  var num=prompt();
  num=parseInt(num);

  var str=document.getElementById('ans');
 str.textContent='入力された値は整数「' + num + '」です。';
 
}
</script>



JavaScriptで、ある値が数値かどうかを判定する場合は、「isNaN() 関数」を使用します。isNaN() 関数の使い方と注意点を覚えましょう。
isNaN() 関数は、JavaScript に組み込まれている関数です。isNaN() は、引数が数値でない場合に true を返し、数値の場合は false を返します。これによって、特定の値が数値か否かを判定することができます。なお、NaN とは Not a Number(非数)を表します。

<button onclick="check();">ボタン</button>
<p id="ans">答え</p>
<script>
var check = function() {
var num=prompt();
var str = document.getElementById('ans');
  if(isNaN(num)){
    str.textContent='数値以外が入力されています';
  } else {
     str.textContent='入力された数は' + num + 'です。';
  }
}
</script>