[JavaScript] 숫자 콤마 표현할 때 소수점 표시하는 방법

오늘은 JavaScript에서 숫자 포맷팅 시 소수점 자릿수를 강제로 표시하는 방법에 대해 알아보겠습니다. 기본적으로 JavaScript의 toLocaleString() 메서드는 불필요한 소수점 이하 0을 생략하는 특성이 있습니다. 예를 들어, 아래와 같이 12345.0을 포맷팅하면:

const value = 12345.0;
console.log(value.toLocaleString('ko-KR')); // 출력: "12,345"

 

숫자 12345.0은 소수점 이하가 0이기 때문에 “12,345”로만 표시됩니다.

하지만 때때로 숫자를 항상 소수점 한 자리까지, 즉 “12,345.0”과 같이 보여주고 싶을 때가 있습니다.

 

toLocaleString() 옵션 활용하기

 

JavaScript의 toLocaleString() 메서드는 옵션 객체를 통해 출력 형식을 상세하게 지정할 수 있습니다.

여기서 중요한 옵션은 minimumFractionDigits입니다.

이 옵션을 1로 지정하면 정수라도 최소 소수점 이하 1자리는 항상 표시됩니다.

 

아래 예시를 확인해 보세요.

const value = 12345.0;
const formattedValue = value.toLocaleString('ko-KR', { minimumFractionDigits: 1 });
console.log(formattedValue); // 출력: "12,345.0"

 

위 코드를 통해, 소수점 이하가 0이더라도 “.0”이 표시되어 원하는 포맷대로 숫자가 출력되는 것을 확인할 수 있습니다.

 

추가 옵션: 최대 소수점 이하 자리수 설정

 

만약 소수점 이하 자리수를 제한하고 싶다면 maximumFractionDigits 옵션도 함께 사용할 수 있습니다.

예를 들어, 소수점 이하 1자리로 고정하고 싶다면 다음과 같이 작성할 수 있습니다.

const value = 12345.678;
const formattedValue = value.toLocaleString('ko-KR', {
  minimumFractionDigits: 1,
  maximumFractionDigits: 1
});
console.log(formattedValue); // 출력: "12,345.7"

 

특히 금융 데이터나 통계 정보 등을 다루는 경우, 숫자의 자릿수 표시가 중요한 역할을 하게 됩니다.

toLocaleString()의 옵션 객체를 잘 활용하면, 정수에도 소수점 이하 자릿수를 강제로 표시하거나 필요한 자릿수로 조절하여 출력할 수 있습니다.