숫자 값에 천단위 콤마를 찍어서 표현해야 할 때가 있으시죠? 방법은 매우 다양합니다만, 시간을 아껴야겠죠. 피해야 할 2가지 방법 간단히 소개하고, 추천하는 방법도 함께 안내해 드리겠습니다.
목차
천단위 콤마 직접 찍어주기
이건 정말 말 그대로 직접 처리해 주는 것입니다. 숫자를 문자열로 변경한 다음 문자열을 판독해서 3자리마다 콤마를 찍어주는 방식이죠. 문제는 직접 찍어주는 함수를 작성하거나 누군가가 제작한 코드를 찾아서 사용해야 한다는 점입니다. 매우 번거롭고 귀찮기 짝이 없습니다. 학습을 위한 목적이 아니라면 절대 하지 말아야 할 작업입니다.
정규식 사용하기
첫번째 방법보다는 조금 세련된 방법으로 정규식을 사용하는 방법이 있습니다. 정규식을 잘 학습해서 활용하는 분들은 손쉽게 해결할 수 있겠지만, 어쨌든 정규식을 작성해야 합니다. 번거로운 과정이 있다는 점은 부인할 수 없습니다.
Number.prototype.toLocaleString 활용
가장 간편한 방법은 바로 toLocaleString을 사용하는 것입니다. 파라미터로 로케일 값을 함께 넣어주시기만 하면 원하는 콤마찍기가 적용됩니다. 그럼 사용 방법 아래에 코드로 적어드립니다.
var price = 12500;
var priceString = price.toLocaleString("ko-KR");
console.log(priceString);위와 같은 코드를 사용하면 대한민국의 로케일에 맞추어 아래와 같이 천단위 콤마가 찍힙니다.
12,500다른 국가의 로케일 사용 예시
개발을 하다보면 대한민국의 로케일로 값을 보여주기만 하는 건 아니죠? 그리스에서는 어떻게 값을 표현하는지 한번 확인해 보겠습니다.
var price = 12345.32;
var priceString = price.toLocaleString("el-GR");
console.log(priceString);엇! 하고 깜짝 놀라는 분들 계실까요? 유럽에서는 우리나라와는 반대로 천단위 콤마 대신에 마침표를 사용하고, 소수점으로 콤마를 사용합니다. 그래서 아래와 같은 결과가 나오게 됩니다.
12.345,32역시 toLocaleString 사용하셔야겠죠? 특히나 여러 로케일을 다뤄야 하는 경우에 있는 분들이라면, 꼭 toLocaleString 사용해서 귀한 시간 아끼시길 바랍니다. 필요하신 분들께 도움이 되길 바랍니다.
관련 링크
MDN Web Docs의 Javascript 공식 문서 공유해 드립니다.