[JavaScript] 자바스크립트 toFixed

자바스크립트에서 소수점의 자릿수를 제한할 수 있는 자바스크립트 메서드인 toFixed 에 대해 정리하겠습니다.

 

toFixed
Number 인스턴스의 소수 부분 자릿수를 전달받은 값으로 고정한 후, 그 값을 문자열로 변환합니다.

 

numObj.toFixed([digits])

 

toFixed()는 number 객체를 주어진 digits 만큼의 소수점 이하 자리수를 정확하게 갖는 문자열 표현으로
반환합니다. 소수점 이하가 길면 숫자를 반올림하고, 짧아서 부족할 경우 뒤를 0으로 채울 수 있습니다.

 

매개변수 (digits)
소수점 뒤에 나타날 자릿수입니다. 0 이상 100 이하의 값을 사용할 수 있습니다.
값을 지정하지 않으면 0 을 사용합니다.

 

toFixed() 사용하기

var num = 12.345;
num.toFixed();            // returns '12'
num.toFixed(1);          //  returns '12.3'
num.toFixed(2);          // returns '12.35'
num.toFixed(6);          // returns '12.345000'
(1.23e20).toFixed(2);  // returns '123000000000000000000.00'

 

toFixed() 오류

(4.05).toFixed(1) ;  // returns 4.0

 

4.05 를 소수점 한자리로 반올림 처리하면 4.1 이지만, toFixed(1) 로 나오는 값은 4.0 이 나옵니다.

숫자는 내부적으로 64비트 형식 IEEE-754으로 표현되기 때문에 숫자를 저장하려면 정확히 64비트가 필요합니다. 

64비트 중 52비트는 숫자를 저장하는 데 사용되고, 11비트는 소수점 위치를(정수는 0), 1비트는 부호를 저장하는 데 

사용됩니다.
그런데 숫자가 너무 커지면 64비트 공간이 넘쳐서 Infinity로 처리됩니다.

꽤 자주 발생하는 현상인 정밀도 손실(loss of precision)도 있습니다.

 

다른 언어에서도 같은 이슈가 있습니다.
자바스크립트와 동일한 숫자 형식을 사용하기 때문에 PHP, Java, C, Perl, Ruby에서도 똑같은 결과가 나옵니다.

 

해결 방법

(4.05).toFixed(20) ;  // returns 4.04999999999999982236

정밀도 손실은 수를 증가시킬 수도 있고, 감소시킬 수도 있습니다.

위 예시에서는수가 감소된 경우입니다. 그래서, 반올림을 하게 되면 버림이 되어 버렸습니다.

위와 같은 현상은 꽤 자주 발생하는 현상입니다.

 

4.05 를 정상적으로 반올림하려면, 반올림하기 전에 이 수를 정수에 가깝게 만들어야 합니다.

(4.05*10).toFixed(20) ;  // returns 40.50000000000000000000

40.5 에서는 정밀도 손실이 전혀 발생하지 않았습니다.

소수 부분인 0.5가 정확히 1/2이기 때문입니다. 
2진법 체계에서 2의 거듭제곱으로 나눈 값은 정확하게 저장되기 때문에 제대로 반올림할 수 있습니다.

 

parseFloat((4.05*10).toFixed(0) / 10).toFixed(1) ;  //returns 4.1