javascript로 숫자 형변환하기

javascript를 통해 문자열 형태의 변수를 숫자로 변환해야 하는 경우가 많다.

Data로 조회 조건으로 보내거나, 입력/수정 전 script를 통해서 validation 하는 경우,

값에 대해 조건을 걸어서 비교가 필요한 경우,

문자보다 숫자로 변환하였을 경우에 좀 더 편리하게 코딩이 가능한 경우 등

다양한 이유에서 형변환을 하게 되겠지만

1월부터 12월까지의 월 선택값을 숫자로 형변환하면서 겪었던 내용을 바탕으로

오늘 포스팅 할 숫자 형변환하기에 대해서 이야기하고자 한다.

javascript는 별도로 타입을 명시하지 않고 변수를 선언하기 때문에

var testVal1 = "테스트 값입니다.";

alert(typeof(testVal1)); 

-> 결과값 string // string 형태의 변수로 인식됨

var testVal2 = 222222;

alert(typeof(testVal2)); 

-> 결과값 number // number 형태의 변수로 인식됨

이런식으로 형태를 인식하게 된다.

본인이 겪었던 형변환의 문제는 다음과 같았다.

생년월일 선택 시, 월을 선택하는 select box를 구성하는 부분에

사용자에게 표시되는 부분은 1월 ~ 12월이지만 실제 데이터를 넘기는 value 부분은

01 ~ 12로 세팅되어 있었다.

예시 (구성방법을 제외하고 구성형태만 기술합니다)

<select id="month">

<option value="">선택해주세요</option>

<option value="01">1월</option>

<option value="02">2월</option>

<option value="03">3월</option>

<option value="04">4월</option>

.

.

.

<option value="10">10월</option>

<option value="11">11월</option>

<option value="12">12월</option>

</select>

선택한 월별로 조건을 걸어야 하는 부분이 있었는데

형변환이 이상하게 일어나는 내용을 발견하였다.

alert(parseInt($("#month").val()) 로 월 선택 내역을 출력하도록 했더니

1월부터 7월까지는 정상적으로 변환이 일어나다가

8월을 선택한 경우 0이 출력되고 9월을 선택한 경우에도 0이 출력되었다.

중간에서 이상하게 값을 변환하지도 모르고 어디서부터 문제가 생긴지

찾지를 못해서 조건을 잘못건줄 알고 그것만 헤매고 있었는데... ^_ㅠ

여튼 그래서 parseInt에 대해서 알아보게 되었다.

parseInt (string, radix)

- string : 필수값, 변환될 문자열

- radix : 선택, 2 부터 36까지의 진법을 사용할 수 있다.

         입력하지 않는 경우 기본적으로 최근 브라우저인 경우 10진법으로 계산됨

         이전 버전의 브라우저는 8진법으로 계산되는 브라우저가 있을 수 있음.

개발 환경이 I.E 9에서 진행되어 8진법으로 계산되어 나왔던 것으로 보여진다.

그래서 정말 8진법으로 인식하는 건가 테스트 해보았다.

	Internet Explorer 9.0.8112	Chrome 41.0.2272
parseInt("01")	1	1
parseInt("08")	0	8
parseInt("09")	0	9
parseInt("10")	10	10
parseInt("11")	11	11
parseInt("010")	8	10
parseInt("011")	9	11

크롬의 경우, 10진법으로 인식하고 있는 것으로 보여지나 I.E 9에서는 8진법으로 숫자를 인식하고 있다.

0x 방식의 숫자를 8진법으로 보기때문에 08, 09의 경우 8진법으로 계산이 불가하여

0 이라는 결과를 내보내고 010, 011은 8진법으로 계산이 가능한 형태로 반환을 하고 있다.

반면 10, 11은 0x의 형태가 아니므로 10진법 형태로 계산하고 있다.

이런 문제를 해결하기 위해서 parseInt( 형변환 할 문자열, 10) 이런식으로

10진법으로 변환할 것이라고 명시적으로 적어주는 것이 좋다.

또는 브라우저에 관계없이 숫자 형변환이 이루어지도록 변경하기 위해서

parseInt 대신 Number 함수를 사용한 경우에는 브라우저 관계없이 01 ~ 12를 모두 정상적으로 10진법으로

변환이 되었고 010, 011에 대해서도 8진법으로 계산되지 않는 것으로 확인되었다.

이 이외의 경우에 대해서는 테스트를 못했으나 정상적인 숫자에 대해서는

10진법으로 변환되지 않을까 생각된다.

Number ( string )

- string : 형 변환할 문자열로 필수값. 아무런 값을 넣지 않으면 0을 반환한다.

쓰는 방식에 따라 다양하게 활용할 수 있으므로

어느 쪽이든 쓰기에 편한 쪽을 이용하면 될 듯 하다.