Javascript에서 String을 Number타입으로 바꾸기

누가 물어봐서 찾아본 김에 그냥 정리합니다. 아시다시피 Javascript는 명시적인 타입정의가 없습니다. int나 String같이 타입을 명시해서 변수를 정의하지 않고 그냥 var타입으로 정의하면 Javascript가 알아서 적절한 타입을 지정합니다. 명시적인 타입이 없다는건 때론 타입때문에 헷갈리기도 하고 원치 않는 결과가 나타나기도 합니다.

그래서 보통은 약간 편법적인 방법으로 String을 Number로 바꾼다던지 Number를 String으로 바꾼다던지 합니다.

view plaincopy to clipboardprint?

1. // 숫자를 스트링로 바꾸기  
2. var tt = 2  
3. tt += "";  
4. alert(typeof tt);   // Result : string  
5.  
6. // 스트링을 숫자로 바꾸기  
7. tt = "2" 
8. tt *= 1;  
9. alert(typeof tt);    // Result : number  

// 숫자를 스트링로 바꾸기 var tt = 2 tt += ""; alert(typeof tt);   // Result : string // 스트링을 숫자로 바꾸기 tt = "2" tt *= 1; alert(typeof tt);    // Result : number
위의 방법이 가장 간단하게 형변환을 하는 방법입니다. 쉽게 자바스크립트의 자동형변환을 이용한 겁니다. 숫자타입에 문자열을 더하면 결과가 문자열이 되고 문자열에 숫자를 곱하면 숫자타입이 되는 특성을 이용해서 결과는 달라지지 않게 타입만 변환되도록 한 것입니다.

해본 사람을 보면 알기는 하겠지만 잘 모르는 사람이 보면 어떤 의도로 한 소스인지 명확하지 않은 단점이 있기도 하고 좀더 명시적으로 타입변환이 필요할 때가 있습니다.

view plaincopy to clipboardprint?

1. // 숫자를 스트링로 바꾸기  
2. var tt = 2  
3. alert(typeof tt);    // Result : number  
4. tt = String(tt);  
5. alert(typeof tt);    // Result : string  
6.  
7. // 스트링을 숫자로 바꾸기  
8. tt = "2" 
9. alert(typeof tt);    // Result : string  
10. tt = Number(tt);  
11. alert(typeof tt);    // Result : number  

// 숫자를 스트링로 바꾸기 var tt = 2 alert(typeof tt);    // Result : number tt = String(tt); alert(typeof tt);    // Result : string // 스트링을 숫자로 바꾸기 tt = "2" alert(typeof tt);    // Result : string tt = Number(tt); alert(typeof tt);    // Result : number
타입변환을 하는 함수인 Number()와 String()을 이용한 소스입니다.



또한 아래처럼 parseInt()나 parseFloat()를 이용해서도 형변환을 할 수 있습니다. 함수명에서 알 수 있듯이 parseInt()는 Integer타입으로 변환을 하고 parseFloat()는 Float타입으로 변환을 합니다.

view plaincopy to clipboardprint?

1. var tt = "2" 
2. alert(typeof tt);    // Result : string  
3. tt = parseInt(tt);  
4. alert(typeof tt);    // Result : number  
5.               
6. tt = "2" 
7. alert(typeof tt);    // Result : string  
8. tt = parseFloat(tt);  
9. alert(typeof tt);    // Result : number  

var tt = "2" alert(typeof tt);    // Result : string tt = parseInt(tt); alert(typeof tt);    // Result : number             tt = "2" alert(typeof tt);    // Result : string tt = parseFloat(tt); alert(typeof tt);    // Result : number
parseInt()나 parseFloat()는 형변환 자체가 목적은 아니기 때문에 얘기가 나온 김에 좀 더 살펴보겠습니다. parseIn()와 parseFloat()는 정수와 실수로 파싱해 주는 역할을 하고 있습니다.

parseInt(string, radix)
parseFloat(string)

API정의를 보면 위처럼 정의되어 있습니다. parseInt()에서 radix는 기수로 parse할 때 기준이 되는 진수입니다. 정수로 파싱하는 parseInt에만 정의되어 있습니다. 2~ 36진수까지를 정의할 수 있고 optional값으로 없을 경우 10진수로 parse합니다.

view plaincopy to clipboardprint?

1. parseInt("123.456");        // 123  
2. parseInt("100mile");        // 100  
3. parseInt("w25");               // NaN  
4. parseInt("05");                  // 5  
5. parseInt("09");                  // 0  
6. parseInt("0x35");              // 53  
7. parseInt("1101", 2);         // 13  
8. parseInt("09", 10);            // 9  
9. parseInt("10", 8);              // 8  
10.  
11. parseFloat("123.456");       // 123.456  
12. parseFloat("100.5mile");    // 100.5  
13. parseFloat("w25");               // NaN  
14. parseFloat("05");                  // 5  
15. parseFloat("09");                  // 9  
16. parseFloat("0x35");              // 0  

parseInt("123.456");        // 123 parseInt("100mile");        // 100 parseInt("w25");               // NaN parseInt("05");                  // 5 parseInt("09");                  // 0 parseInt("0x35");              // 53 parseInt("1101", 2);         // 13 parseInt("09", 10);            // 9 parseInt("10", 8);              // 8 parseFloat("123.456");       // 123.456 parseFloat("100.5mile");    // 100.5 parseFloat("w25");               // NaN parseFloat("05");                  // 5 parseFloat("09");                  // 9 parseFloat("0x35");              // 0
Javascript에서 "0"으로 시작하는 숫자는 8진수 "0x"로 시작하는 숫자는 16진수로 정의되고 있기 때문에 5번라인에서 9가 8진수에서 사용할 수 없기 때문에 의도하지 않은 0이 나왔습니다.


출처 : http://blog.outsider.ne.kr/361