숫자 체크 (isNaN, jQuery.isNumeric, 정규식)

자바스크립트에서 숫자 체크는 정규식, isNaN, jQuery 등 여러가지 방법이 있습니다.

아래에 코드와 테스트한 결과를 올려놓았으니 본인이 원하는 상황에 맞게 사용하세요.

isNaN( value )

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

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

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

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21

!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.isNumeric( value )

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

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

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

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

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22

$.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) 사용 여부를 선택해야합니다.

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

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23

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;  } }

아래 결과입니다.

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25

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

위 예제에 없는 정규식이 필요하시면 댓글남겨주시면 답변드리겠습니다. 좋은 하루 되세요 ^^

출처 - http://sometimes-n.tistory.com/34