본문 바로가기
[ Developer ]/JavaScript

[JavaScript] 자바스크립트 숫자 to 문자 형 변환

by 김현섭. 2016. 10. 6.
336x280(권장), 300x250(권장), 250x250, 200x200 크기의 광고 코드만 넣을 수 있습니다.
숫자 to 문자열 형 변환

숫자를 문자열로 변환하는 방식에 대해서 학습해본다


자동변환
문자열 연결 수식에서 숫자가 사용될 경우 해당 숫자는 자동으로 문자열로 변환된다.

1
2
3
4
5
<script type="text/javascript">
    // 자동변환
    var str1 = 50 + " meters";  // 50 meters
    var str2 = 50 + "";
</script>
cs


String() 함수 이용 변환
숫자를 문자열로 명시적으로 변환하는 방법은 String() 함수를 사용하는 것이다.

1
2
3
4
5
6
<script type="text/javascript">
    var number1 = 50;
    var string1 = String(number1);
    console.log(number1.length);    // undefined
    console.log(string1.length);    // 2
</script>
cs


toString() 함수 이용 변환
숫자를 문자열로 변환하는 또 한 가지 방법은 toString() 메서드를 사용하는 것이다.

1
2
3
4
5
6
<script type="text/javascript">
    var number1 = 500;
    var string1 = number1.toString();
    console.log(number1.length);    // undefined
    console.log(string1.length);    // 3
</script>
cs


toFixed(), toExponential(), toPrecision()
  • toFixed()는 숫자를 문자열로 변환하고 지정한 소수점 이후에 지정된 자릿수만큼 보여준다.
  • toExponential()은 지수 표기법을 이용해 숫자를 문자열로 변환한다. 이때 소수점 앞에 한 자릿수로 나타내고 소수점 이후에는 지정된 자릿수만큼 표현한다.
  • toPrecision()은 지정된 유효 숫자 자릿수를 이용해 숫자를 변환한다. 이때 유효 숫자 자릿수의 숫자가 변환할 숫자의 전체 정수부를 표시할 만큼 충분하지 않다면 지수 표기법을 사용한다.

1
2
3
4
5
6
7
8
9
10
<script type="text/javascript">
    var n = 123456.789;
    console.log(n.toFixed(0));      //123457
    console.log(n.toFixed(2));      //123456.79
    console.log(n.toExponential(1));//1.2e+5
    console.log(n.toExponential(3));//1.235e+5
    console.log(n.toPrecision(4));  //1.235e+5
    console.log(n.toPrecision(6));  //123457
    console.log(n.toPrecision(7));  //123456.8
</script>
cs


문자열 to 숫자 형 변환

자동 변환
숫자 컨텍스트에서 문자열이 사용되면 해당 문자열은 자동으로 숫자로 변환된다. 다음 예제를 보자.

1
2
3
4
5
6
7
<script type="text/javascript">
    console.log("50"*"5");  // 250
    console.log(+"50");     // 50
    console.log(+" 50 ");   // 50, 숫자 앞과 뒤의 공백은 무시됨
    console.log("50"-0);    // 50
    console.log(+"50abc");  // NaN, 숫자로 변환할 수 없음
</script>
cs


Number() 생성자 이용 변환
문자열을 숫자로 변환하는 명시적이고 엄격한 방법은 Number() 생성자를 호출하는 것이다. 이 경우 숫자의 앞과 뒤에 공백이 포함될 수 있지만 문자열 내에 비공백 문자가 나타나서는 안 된다.

1
2
3
4
5
6
7
8
9
<script type="text/javascript">
    console.log(Number("50"));      // 50
    console.log(Number("50.55"));   // 50.55
    console.log(Number(" 50 "));    // 50
    console.log(Number(" 50abc"));  // NaN
    console.log(Number("abc50"));   // NaN
    console.log(Number("0x50"));    // 80, 16진수
    console.log(Number("0xff"));    // 255, 16진수
</script>
cs


parseInt(), parseFloat() 함수 이용 변환
문자열을 숫자로 변환하는 유연한 방법은 parseInt()와 parseFloat()을 사용하는 것이다. 이 두 함수는 문자열 초기에 나오는 숫자를 변환해서 반환하는데, 이때 숫자 뒤에 이어지는 내용은 무시한다. parseInt()는 정수만을 파싱하는 반면, parseFloat()은 정수와 부동 소수점 수를 모두 파싱한다.

1
2
3
4
5
6
7
8
9
10
11
12
<script type="text/javascript">
    console.log(parseInt("50 meters")); // 50
    console.log(parseInt("50.55"));     // 50
    console.log(parseInt(" 50 "));      // 50
    console.log(parseInt(" 50abc"));    // 50
    console.log(parseInt("abc50"));     // NaN
    console.log(parseInt("0x50"));      // 80, 16진수
    console.log(parseInt("0xff"));      // 255, 16진수
    console.log(parseInt("010"));       // 8이나 10, 브라우저에 따라 다름
    console.log(parseFloat(" 50.55 meters"));   // 50.55
    console.log(parseFloat("$50.55 dollars"));  // NaN
</script>
cs

참고: ECMAScript 명세에서는 문자열이 ?0?(?0x?나 ?0X?가 아닌)으로 시작할 경우 parseInt()에서는 그것을 8진수나 10진수로 파싱할 수도 있다고 명시하고 있다. 그러므로 앞에 0이 붙은 숫자를 파싱할 때는 parseInt()를 사용해서는 안 된다.


부정확한 계산
자바스크립트에서는 부동 소수점 수(예: 0.1)를 정확히 이진수로 표현할 수 없기 때문에 부동 소수점 계산이 부정확한 측면이 있다. 다음 예제는 그러한 부정확성을 보여준다.

1
2
3
4
5
6
7
8
9
10
11
12
13
<script type="text/javascript">
    console.log(0.1 + 0.2 == 0.3);          // false
    console.log(0.1 + 0.2);                 // 0.30000000000000004
    console.log((0.1 + 0.2).toFixed(30) );  // 0.300000000000000044408920985006
    
    // 0.1과 0.2 정확히 더하기 위한 숫자 정수 만든 이후 계산
    console.log(0.1*10 + 0.2*10 == 0.3*10); // true
    console.log((0.1*10 + 0.2*10)/10);      // 0.3
    
    // 부동 소수점 수를 고정된 정밀도 숫자로 반올림
    console.log((0.1 + 0.2).toFixed(2== 0.3); // true
    console.log((0.1 + 0.2).toFixed(2));        // 0.30
</script>
cs