티스토리 뷰
자바스크립트에서 숫자 체크는 정규식, isNaN, jQuery 등 여러가지 방법이 있습니다.
아래에 코드와 테스트한 결과를 올려놓았으니 본인이 원하는 상황에 맞게 사용하세요.
자바스크립트에서 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
위 예제에 없는 정규식이 필요하시면 댓글남겨주시면 답변드리겠습니다. 좋은 하루 되세요 ^^
'개발 > javascript,jQuery' 카테고리의 다른 글
- Total
- Today
- Yesterday
- 디테일링
- 퓨리스 A34 왁스
- 타이어 광택제 비교
- 셀프세차
- 세차
- 포스타 upp
- 퓨리스 타이어 광택제
- 티스토리 스킨
- 블로그
- 타이어 광택제
- 티스토리 반응형 스킨
- 타이어 드레싱
- 티스토리
- TDG 블루베리 휠클리너
- 퓨리스 A34
- 티스토리 새 반응형 웹스킨 #1
- 해운대
- 자동차 디테일링
- 티스토리 반응형 스킨 #1
- 데피니티브 율리시스
일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
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 | 26 | 27 | 28 | 29 | 30 |