Web/JavaScript

[JavaScript] 자바스크립트 반올림, 올림, 버림 방법 - 소수점 2자리까지 출력

코딩팩토리 2024. 6. 15. 01:59

계산을 하다 보면 무한소수가 나오는 경우가 종종 있는데요. 이럴 때는 보기 좋게 소수점 2자리까지 출력하는 방법을 많이 사용합니다. 이번 포스팅에서는 자바스크립트에서 소수점 2자리까지 반올림, 올림, 버림 하는 방법을 알아보도록 하겠습니다.

 

소수점 2자리까지 반올림 (toFixed)

// 사용법
소수.toFixed(자릿수)
  • 소수 : toFixed 함수는 number 타입에서만 가능합니다. 문자열에 해당 함수를 사용하면 에러가 발생합니다.
  • 자릿수 : 총 나타낼 소수의 자릿수를 의미하며 2로 진행하면 소수점 2자리까지만 나타냅니다.

See the Pen 반올림 by 우정태 (@sxqouumz-the-reactor) on CodePen.

 

자바스크립트에서 반올림을 하려면 toFiexed() 메서드를 사용하시면 됩니다. 참고로 toFixed는 문자열을 반환하기 때문에 숫자로 변환하고 싶다면 parseFloat를 사용해서 변환을 같이 진행해 주셔야 합니다.

 


 

 Math 객체 사용 

Math객체에는 숫자를 처리할 수 있는 다양한 메소드가 있습니다. 여기서 ceil(올림), round(반올림), floor(내림) 함수를 사용하여 소수점을 처리할 수 있습니다.

 

소수점 2자리까지 올림 (Math.ceil)

// 사용법
Math.ceil(올림 할 숫자)

See the Pen ceil by 우정태 (@sxqouumz-the-reactor) on CodePen.

 

Math객체에 ceil함수를 사용하면 숫자를 올림할 수 있습니다. 이때 ceil은 마지막 숫자를 올리는 것에서 그치기 때문에 소수점 2번째 자리로 만들어주기 위해서는 숫자에 먼저 100을 곱하여 소수점 이하 2자리를 정수로 만든 후 올림(Math.ceil)을 하고 다시 100으로 나누어 소수점 이하 2자리로 만들어주는 과정을 거쳐야 합니다.

 

  1. 초기숫자 : 123.45
  2. *100 진행 : 12345
  3. Math.ceil 메서드 실행 : 12346
  4. /100 진행 : 123.46

 

소수점 2자리까지 반올림 (Math.round)

// 사용법
Math.round(반올림 할 숫자)

See the Pen round by 우정태 (@sxqouumz-the-reactor) on CodePen.

 

Math객체에 round() 메서드를 사용하면 숫자를 반올림할 수 있습니다. round 메서드 또한 마지막 숫자를 올리는 것에서 그치기 때문에 위의 예제처럼 소수점 2번째 자리로 만들어주기 위해서는 숫자에 먼저 100을 곱하여 소수점 이하 2자리를 정수로 만든 후 반올림(Math.round)을 하고 다시 100으로 나누어 소수점 이하 2자리로 만들어주는 과정을 거쳐야 합니다.

 

  1. 초기숫자 : 123.45
  2. *100 진행 : 12345
  3. Math.round 메서드 실행 : 12346
  4. /100 진행 : 123.46

 

소수점 2자리까지 버림 (Math.floor)

// 사용법
Math.floor(버림 할 숫자)

See the Pen floor by 우정태 (@sxqouumz-the-reactor) on CodePen.

 

Math객체에 floor() 메서드를 사용하면 숫자를 버림할 수 있습니다. 마찬가지로 소수점 2번째 자리로 만들어주기 위해서는 숫자에 먼저 100을 곱하여 소수점 이하 2자리를 정수로 만든 후 버림(Math.floor)을 하고 다시 100으로 나누어 소수점 이하 2자리로 만들어주도록 합시다.

 

  1. 초기숫자 : 123.45
  2. *100 진행 : 12345
  3. Math.floor 메서드 실행 : 12345
  4. /100 진행 : 123.45