[javascript] 숫자에 소수점과 천단위 쉼표를 동시에 표현하기

소수점이 포함되어 있는 숫자(number 타입의 데이터)를 표현할 때

소수점 몇자리까지 표현 + 천단위마다 쉼표찍기 

를 나타내고 싶을때

const myNum = 12345.6789

myNum.toFixed(1).toLocaleString()

위처럼 실행해봤다.

Number.toFixed()

• toFixed(n)는 소수점 n번째자리까지 표현한다.
• 소수점 이하가 길면 숫자를 반올림하고, 짧아서 부족할 경우 뒤를 0으로 채울 수 있다.

Number.toLocaleString()

• 숫자를 언어별로 구분하여 나타내는 문자열을 반환한다.
• 데이터를 다양한 형태로 나타낼때 사용하면 좋을듯!
• 제공하는 기능이 많으니 설명을 따로 적는것보다 doc을 읽으면 좋을듯하다
• 암튼, 나는 천단위마다 쉼표를 찍기위해 이 메서드를 사용했다.

 

그런데 

myNum.toFixed(1).toLocaleString()

 

이 코드를 실행하면 기대값과 다른 값이 도출된다.

 

분리해서 호출하면 실행이될까 해봤는데, 이것도 안되넹..!!

 

myNum에대해서 toLocaleString()을 실행시켜보면 원하는대로 동작한다.

 

 

그럼 원인을 생각해보면

toFixed의 결과값이 스트링타입이고,

toLocaleString()은 number타입의 값에 대해서만 천단위 쉼표를 찍어주는것같음.

 

그럼 이제 어떻게해야할것인가 찾아보다가 스택오버플로우에서 아래의 해결책을 발견했다.

numObj.toLocaleString([locales [, options]])

type이 number인 값에서 toLocaleString 메소드를 인자 없이 호출하면 자동으로 String으로 형 변환된 뒤 콤마가 찍힌다

일단 결과부터 얘기해보자면

myNum.toLocaleString(undefined, { minimumFractionDigits: 1, maximumFractionDigits: 1 })

 이 코드를 실행하면 된다. (위 예시는 무조건 소수점 첫번째 자리까지 출력함)

options로 설정할 수 있는게 정말많다!

 

나는 소수점만 처리하면되기때문에 minimumFractionDigits과 maximumFractionDigits을 사용하였다.

 

공식문서를 보고 필요한 옵션을 사용하면 될듯하다!