[Javascript] 숫자 3자리마다 콤마(,) 찍기

123456789라는 숫자가 있을 때 화폐 단위로 표현하는 등, 숫자 3자리마다 콤마(,)를 넣는 경우가 있습니다. 콤마가 들어가면 "123,456,789" 처럼 읽기가 편해지며, 콤마로 화폐의 단위를 쉽게 알 수 있습니다.

 

이 글에서는 숫자 천단위(숫자 3자리)마다 콤마를 넣어 문자열로 만드는 방법을 소개합니다.

 

toLocalString()으로 숫자에 콤마 넣기

number.toLocaleString()는 number를 현재 시스템에 설정된 지역의 숫자 형식으로 콤마를 넣고, 변환된 문자열을 리턴합니다. 저의 시스템 설정의 지역은 대한민국이기 때문에, 대한민국에서 사용하는 숫자 표기법으로 변경해 주는데요, 한국에서는 3자리마다 콤마를 넣기 때문에 아래와 같이 변환됩니다. 그리고 결과를 보면 소수점은 3자리까지만 표현됩니다.

let num = 123456789.1234567;
let str = num.toLocaleString();
console.log(str); // "123,456,789.123"

num = 123456789;
str = num.toLocaleString();
console.log(str); // "123,456,789"

실행 결과:

123,456,789.123
123,456,789

 

시스템 지역과 무관하게 특정 지역의 형식으로 변환하려면 아래와 같이 인자로 Locale 값을 전달하면 됩니다. 실행 결과는 위와 동일합니다.

let num = 123456789.1234567;
let str = num.toLocaleString("ko-KR");
console.log(str); // "123,456,789.123"

num = 123456789;
str = num.toLocaleString("ko-KR");
console.log(str); // "123,456,789"

실행 결과:

123,456,789.123
123,456,789

 

정규표현식으로 숫자에 콤마 넣기

정규표현식을 사용하면 숫자 3자리 간격을 인식할 수 있고, 3자리마다 콤마를 추가하는 것이 가능합니다.

단순히 3자리 간격으로 콤마를 추가하는 것이기 때문에, 소수점 자리수가 있는 경우에도 콤마가 추가되어 이 경우는 사용할 수 없습니다.

• \B : 단어의 경계를 의미하는 패턴
• \d{3} : 숫자 3개 의미
• + : 앞의 패턴이 1개 이상 반복
• \B(?=(\d{3}) : 단어의 경계 뒤에 숫자 3개 패턴이 있는 경우를 찾음
• (?!\d) : 숫자가 오지 않는 경우를 의미

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

실행 결과:

123,456,789