들어가며

문자열 자료형에서 숫자가 있는지 확인하는 방법에 대해서... 자바스크립트에서 직접 겪어보지 않으면 알 수 없는 불편한 부분이 있다. 명확하게 숫자다! 라고 알려주는 함수가 없다. isNaN 함수가 비슷한 역할을 하지만 공백이나 빈 배열도 숫자라고 표기하는 단점 때문에 명확하게 숫자인지 확인하기가 애매하다. 검색을 해본 결과 stackoverflow에 그나마 만족스러운 답변이 올라와서 관련 포스팅을 해보려고 한다.

function isNumeric(str) {
  if (typeof str != "string") return false // we only process strings!  
  return !isNaN(str) && // use type coercion to parse the _entirety_ of the string (`parseFloat` alone does not do this)...
         !isNaN(parseFloat(str)) // ...and ensure strings of whitespace fail
}

빈 배열의 변수를 차단

typeof str != "string"

먼저 if문을 통해서 문자인 경우만 받아드린다. isNaN 메소드는 빈 배열, 공백 문자열, Boolean 값에도 반응하는 문제가 있다.

isNaN

isNaN(123)         // false
isNaN('123')       // false
isNaN('1e10000')   // false (This translates to Infinity, which is a number)
isNaN('foo')       // true
isNaN('10px')      // true
isNaN('')          // false
isNaN(' ')         // false
isNaN(false)       // false

문자와 숫자가 섞인지 확인

!isNaN(str) &&

isNaN의 문제로 인하여 parseFloat 메소드를 사용하는데 이 메소드는 문자와 숫자가 섞여있으면 숫자만 반환한다. 그래서 이 문자가 숫자인지 문자인지 정확하게 확인할 수는 없다.

&& 논리연산자로 뒤에 온 결과값이 return 되는 구조다.

parseFloat('1a') // 1

정말로 숫자인지 확인

!isNaN(parseFloat(str))

마지막으로 확인한다. 앞에서 예외케이스를 다 걸렀기 때문에 단순하게 확인할 수 있다.

참고로 isNaN 결과가 false일 경우 숫자임을 표기하기 때문에 앞에 ! 문자로 결과를 반대로 전환한다.

참조 URL

https://stackoverflow.com/questions/175739/built-in-way-in-javascript-to-check-if-a-string-is-a-valid-number