[JavaScript] 자바스크립트로 숫자 3자리(천단위) 마다 콤마 찍기!

서론

가격표를 표시 할 때는 10000원 보다는 10,000원 식으로 표시해야 가독성이 좋습니다.
하지만 숫자 데이터를 표시하면 콤마 없이 표시되기 때문에 이번에는 자바스크립트를 이용해서
콤마를 찍어주는 방법을 정리해보겠습니다.

1. 정규 표현식 사용하기

첫 번째 방법은 replace() 메서드에 정규 표현식을 사용하여 콤마로 변환하는 방법 입니다.

const num = 123456789
console.log(num.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ","))
// 123,456,789

※ 정규표현식에 대해서는 글이 길어지기 떄문에 다음에 정리하겠습니다.

2. toLocaleString()

두 번째로는 toLocaleString() 메서드를 이용하여 콤마를 찍는 방법이 있습니다.
주의할 점으로는 toLocaleString() 메서드를 이용하려면 꼭 Number 타입에 사용을 해야한다는 것 입니다.
만일 숫자 데이터가 아닌 문자열에 사용을 하면 오류를 반환합니다.

// 구문
toLocaleString()
toLocaleString(locales)
toLocaleString(locales, options)

const num = 123456789
console.log(num.toLocaleString())
// 123,456,789
// `toLocaleString()`는 인자가 없이 사용을하면 사용자의 PC의 환경 로컬을 따라서 표시를 해줍니다.

console.log(num.toLocaleString('ko-KR'))
// 123,456,789
// 로컬을 인자로 넣으면 해당 로컬의 포맷으로 표시해줍니다.

const number = 123456789.123456
console.log(number.toLocaleString('ko-KR', { maximumFractionDigits: 4 }))
// 123,456,789.1234
// option 인자로 전달되는 객체 안에는 maximumFractionDigits 값이 4로 지정되어 있어서 소숫점 4자리까지 표시

참고

Number.prototype.toLocaleString()
[Javascript] 숫자 3자리(천단위) 마다 콤마 찍는 2가지 방법
[Javascript] 숫자 3자리마다 콤마(,) 찍기(정규식,toLocalString)