[Javascript] inputから取得した値を数字（整数）か否か判定したい

Question

はじめまして。
当方javascriptの初心者です。
皆さんの知識をお借りできればと思います。

前提・実現したいこと

htmlのinputから値を取得し、
javascriptで数字（整数）かどうかを判定したい。

該当のソースコード

  <div>
    <input type="number" id="inputValue">
  </div>
  <button>実行</button>

    document.querySelector('button').addEventListener( 'click',() => {
      let value = document.getElementById('inputValue').value;
      if (Number.isInteger(value)) {
        console.log("数字(整数)");
      } else {
        console.log("数字(整数)ではない");
      }
    })

発生している事象

getElementByIdで取得した値が、数字を入力しているにも関わらずtypeof()で検証するとstringとなっています。
Number(), parseInt()で数値への変換を試みましたが反応しませんでした。
しかし演算を行うと数字として計算が可能となっており、困惑しております。

試したこと

Number.isInteger
Number.isNaN

Answer 1

対応ブラウザに留意が必要ですが、「HTMLInputElement#valueAsNumber + Number.isInteger()」でお望みの結果になります。
https://developer.mozilla.org/ja/docs/Web/API/HTMLInputElement
https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Number/isInteger

Re: hayato182 さん

Answer 2

getElementByIdで取得した値が、数字を入力しているにも関わらずtypeof()で検証するとstringとなっています。

はい、inputへ入力した値は、（ファイルなどイレギュラーな入力フォームを除いて）中身によらず文字列です。

正規表現で数値の文字列か検証すればいいかと思います。

演算を行うと数字として計算が可能となっており

-・*・/といった演算は数値にしか適用できませんので、文字列が来ても自動で数値に変換して演算を行います。

Answer 3

どこまで厳格にやるかですが、私は const isIntegerString = str => str == parseInt(str, 10); のようにすることが多いです。

Answer 4

面倒なので文字列として評価しては？

document.querySelector('button').addEventListener( 'click',() => {
  let value = document.getElementById('inputValue').value;
  if (/^(-?[1-9][0-9]*|0)$/.test(value)) {
    console.log("数字(整数)");
  } else {
    console.log("数字(整数)ではない");
  }
});

Comments

[yambejp]

type=numberですしinvalidでなければ数値確定でよいような・・
マイナスOKなのか、1.0みたいなのはどうなのか？
こまかい仕様調整は必要です