[Javascript] 문자열 숫자 체크 - isNaN ,Number, 정규식(주의사항)

js로 숫자를 체크할 수 있는 방법은 다양하다.

isNan() 함수나 Number 객체 혹은 정규식을 사용한 패턴매칭 등 다양한 방법으로 숫자를 체크할 수 있다.

그 중에서 IsNan()과 Number객체를 사용하는 방법과 주의사항에 대해 정리해본다.

 

1. isNaN()

javaScript에서 문자열이 숫자인지 체크하기 위한 내장함수이다. 인자가 숫자가 아닐 경우 true, 숫자인 경우 false를 반환한다. 이를 거꾸로 적용하여 !isNan()을 하면 숫자일 경우 true, 아닐 경우 false를 반환하는 방식으로 숫자를 체크하는 방식이다.

 

그러나 isNaN()함수가 undefined, {}, [], null, '',' ', true, false, [], new Date()에 대해서는 false를 반환한다. 즉, 이 케이스의 경우 !isNaN()함수가 true를 반환한다는 말이다. 

문자열에 대해서는 숫자를 판별하기 용이 하지만 다른 타입이나 empty content에 대해서는 가려내지 못한다.

 

See the Pen 숫자체크 by jihyunPark (@jihyunhillpark) on CodePen.

 

<주의 사항>

문자열이 아닌 다른 타입 혹은 '', ' ', null 과 같이 empty인 경우 따로 처리해줘야 한다.

 

2. Number

Number는 js의 내장 객체로 Number(value)를 호출하면 문자열이나 다른 값을 Number 타입으로 변환한다. 만약 변환할 수 없으면 NaN을 반환한다.

Number(value) 앞에 !!을 붙이면 true/false 값을 얻을 수 있는데, 대부분의 블로그에서는 true면 숫자, false면 숫자 아닌 것으로 숫자 체크를 한다고 한다. 

See the Pen 숫자체크2 by jihyunPark (@jihyunhillpark) on CodePen.

 

그런데 과연 !!Number(value)의 값은 완벽하게 숫자를 판별할 수 있을까?

정답을 X다. 

 

Number(value) -> !Number(value) -> !!Number(value) 순으로 따라가 보자.

See the Pen 숫자체크3 by jihyunPark (@jihyunhillpark) on CodePen.

Number(value) 

value가 숫자인 경우 - value가 나옴 

value가 숫자가 아닌 경우 - NaN이 나옴

!Number(value) 

value가 0이 아닌 숫자인 경우 - false

value가 0인 경우 - true

value가 숫자가 아닌 경우 - true

!!Number(value) 

value가 0이 아닌 숫자인 경우 - true

value가 0인 경우 - false

value가 숫자가 아닌 경우 - false

 

<주의 사항>

보다시피 '0'은 인자가 숫자로 변환되는 되지만 !!Number('0')은 false를 반환하고 있다.

0까지 제대로 점검하기 위해서는 이를 체크하는 조건에 추가해줘야 한다.

ex)

function isNum(value) {
    return !!Number(value) || '0' === value;
}

3. 정규식

숫자 패턴만 허용하는 정규식을 적용할 경우 다른 예외 사항을 고려하지 않고 숫자인지를 체크할 수 있다.

아래는 숫자만! (즉, 0과 양의정수) 나타나는지를 체크하는 예시이다.

음의 정수, 그냥 숫자가 포함됐지는 정규식을 또 다르게 응용해서 적용해보면 된다. (아래 예시에서 조금씩만 변형해보면 된다 ^^)

See the Pen 숫자만 정규식 by jihyunPark (@jihyunhillpark) on CodePen.

 

 

 

정리 및 사견

예외 조건들을 생각하지 않고 깔끔하게 처리하는 방법은 결국 패턴매칭이 아닌가 싶다. 

 

추가

Number() 와 parseInt()의 차이점에 대한 글을 다음 블로그를 참고해보길 바란다.

https://hianna.tistory.com/706

 

<참고>

https://hianna.tistory.com/385

https://codechacha.com/ko/javascript-check-if-val-is-number/ 

https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Number

https://fabric004.tistory.com/20

https://inpa.tistory.com/entry/JS-%F0%9F%93%9A-%EC%A0%95%EA%B7%9C%EC%8B%9D-RegExp-%EB%88%84%EA%B5%AC%EB%82%98-%EC%9D%B4%ED%95%B4%ED%95%98%EA%B8%B0-%EC%89%BD%EA%B2%8C-%EC%A0%95%EB%A6%AC