JavaScript 숫자 가격 표시 (천단위 콤마)

10000 -> 10,000
10000000 -> 10,000,000
요런식으로 금액에 콤마를 표기하여 보기쉽게 나타내고 싶은 경우가 있어요.

 

아쉽게도 아직 CSS로 표기할 수 있는 방법은 없는 것으로 알아요.

JavaScript를 활용해서 천단위에 콤마를 찍어볼게요.

 

Number.prototype.toLocalString() 사용

숫자를 특정 언어에 맞게 문자열로 변환해줍니다.

 

var price = 10000;
price.toLocaleString(); // 10,000

 

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number/toLocaleString

Number.prototype.toLocaleString()

정규식 사용

var price = 10000;
price.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ','); //10,000

 

함수를 따로 만들어서 쓰면 되요.

 

function priceToString(price) {
    return price.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ',');
}

 

var price = 10000;
priceToString(price);