종종 올리는 블로그

자바스크립트에서 isNaN 은 숫자가 아닌 값을 찾는 함수입니다.

isNaN ( value ) 의 value가 숫자가 아니라면 true, 숫자라면 false라는건데..원하는대로 나올까요?

숫자가 true로 반환하려면 반대로 해야겠죠? !isNaN( value )로 테스트 해봅시다.

!isNaN( "-10" ) // true
!isNaN( "+10" ) // true
!isNaN( "0" ) // true
!isNaN( "0xFF" ) // true
!isNaN( "8e5" ) // true
!isNaN( "3.1415" ) // true
!isNaN( "0144" ) // true
!isNaN( ".423" ) // true
!isNaN( "" ) // true
!isNaN( "432,000" ) // false
!isNaN( "23,223.002" ) // false
!isNaN( "3,23,423" ) // false
!isNaN( "-0x42" ) // false
!isNaN( "7.2acdgs" ) // false
!isNaN( {} ) // false
!isNaN( NaN ) // false
!isNaN( null ) // true
!isNaN( true ) // true
!isNaN( false ) // true
!isNaN( Infinity ) // true
!isNaN( undefined ) // false

이건 누구든 원하는 결과가 아니죠?

"", null, true, false, Infinity 등  이런 값은 숫자가 아닌데 숫자라고 체크되네요.

이건 사용하지 말아야겠습니다.

jQuery에서 제공하고 있는 유틸리티 중에 하나인 jQuery.isNumeric() 에 대해 알아봅시다.

자세한 사항은 http://api.jquery.com/jQuery.isNumeric/ 에서 확인해 보세요.

$.isNumeric( value ) 의 value가 숫자인지 체크해서 boolean(true or false)값으로 반환합니다.

그러면 어떤 값이 숫자형인 true로 반환되고, 어떤 값이 숫자 아닌 false로 반환되는지 테스트해봤습니다.

$.isNumeric( "-10" ) // true
$.isNumeric( "+10" ) // true
$.isNumeric( "0" ) // true
$.isNumeric( "0xFF" ) // true
$.isNumeric( "8e5" ) // true
$.isNumeric( "3.1415" ) // true
$.isNumeric( "0144" ) // true
$.isNumeric( ".423" ) // true

$.isNumeric( "" ) // false
$.isNumeric( "432,000" ) // false
$.isNumeric( "23,223.002" ) // false
$.isNumeric( "3,23,423" ) // false
$.isNumeric( "-0x42" ) // false
$.isNumeric( "7.2acdgs" ) // false
$.isNumeric( {} ) // false
$.isNumeric( NaN ) // false
$.isNumeric( null ) // false
$.isNumeric( true ) // false
$.isNumeric( false ) // false
$.isNumeric( Infinity ) // false
$.isNumeric( undefined ) // false

위 테스트 결과를 보시면, 16진수, 10진수 모두 체크하여 true 값을 반환해줍니다.

isNaN에서 있던 오류는 없어서 숫자형 체크에는 참 편리하게 사용할 수 있겠네요.

그런데, 만약에 숫자를 체크할때 숫자 단위 기호가 있는 432,000 를 true로 반환하고 싶거나,

10진수만을 true로 반환하고 싶을때도 있겠죠. 다음을 보시죠.

자바스크립트 정규식(RegExp)을 사용해서 함수를 만들어 봅시다.

일단 10진수를 체크하려면 여러 경우가 있는데요

양수/음수기호(+,-), 자릿수구분기호(12,000), 소수점(1.14159) 사용 여부를 선택해야합니다.

아래 주석을 보고 상황에 맞는 정규식을 사용하세요

function isNumeric(num, opt){
  // 좌우 trim(공백제거)을 해준다.
  num = String(num).replace(/^\s+|\s+$/g, "");

  if(typeof opt == "undefined" || opt == "1"){
    // 모든 10진수 (부호 선택, 자릿수구분기호 선택, 소수점 선택)
    var regex = /^[+\-]?(([1-9][0-9]{0,2}(,[0-9]{3})*)|[0-9]+){1}(\.[0-9]+)?$/g;
  }else if(opt == "2"){
    // 부호 미사용, 자릿수구분기호 선택, 소수점 선택
    var regex = /^(([1-9][0-9]{0,2}(,[0-9]{3})*)|[0-9]+){1}(\.[0-9]+)?$/g;
  }else if(opt == "3"){
    // 부호 미사용, 자릿수구분기호 미사용, 소수점 선택
    var regex = /^[0-9]+(\.[0-9]+)?$/g;
  }else{
    // only 숫자만(부호 미사용, 자릿수구분기호 미사용, 소수점 미사용)
    var regex = /^[0-9]$/g;
  }

  if( regex.test(num) ){
    num = num.replace(/,/g, "");
    return isNaN(num) ? false : true;
  }else{ return false;  }
}

아래 결과입니다.

isNumeric( "-10" ) // true
isNumeric( "+10" ) // true
isNumeric( "-10", 2 ) // false
isNumeric( "+10", 2 ) // false
isNumeric( "0" ) // true
isNumeric( "0xFF" ) // false
isNumeric( "8e5" ) // false
isNumeric( "3.1415" ) // true
isNumeric( "3.1415", 4 ) // false
isNumeric( "0144" ) // true
isNumeric( ".423" ) // false
isNumeric( "" ) // false
isNumeric( "432,000" ) // true
isNumeric( "432,000", 3 ) // false
isNumeric( "23,223.002" ) // true
isNumeric( "3,23,423" ) // false
isNumeric( "-0x42" ) // false
isNumeric( "7.2acdgs" ) // false
isNumeric( {} ) // false
isNumeric( NaN ) // false
isNumeric( null ) // false
isNumeric( true ) // false
isNumeric( false ) // false
isNumeric( Infinity ) // false
isNumeric( undefined ) // false