[자바스크립트] javascript 숫자 금액 표시 3자리 마다 콤마 사용법

 

 

 

 

🤷‍♂️ 본론

---

개발을 하다 보면 가격표, 금액을 표시해야 될 때가 있습니다.

10000원 가격을 표시해야 된다고 가정하면 10000 보다 10,000 가격 표시가 가독성이 더 좋습니다.

가격표와 금액은 개발을 하면서 자주 마주할수 있는 데이터이며 단순히 숫자 그대로 표시하는 것보다 콤마와 함께 표시해 주는 것이 좋습니다.

사용자 편의성을 위해서 가격표, 금액을 표시할때 자바스크립트(javascript)에서 콤마를 표시하는 다양한 방법을 알아보겠습니다.

 

 

🤷‍♂️ 3자리마다 콤마를 추가하는 방법

---

 

300x250

 

1. toLocaleString() 메서드 사용

toLocaleString() 메서드를 사용하면 숫자를 지역별 형식에 맞게 변환할 수 있습니다.

이 방법은 가장 많이 쓰이는 방법이며 간단하고 직관적입니다.

 

const number = 10000;
const formattedNumber = number.toLocaleString('ko-KR'); 
//10,000
console.log(formattedNumber);

 

많이 사용되는 locales 언어

 

toLocaleString(en-US) // 영어-미국
toLocaleString(ko-KR) // 한국어-대한민국
toLocaleString(ja-JP) // 일본어-일본

 

 

 

2. 정규 표현식 사용

정규 표현식을 사용하여 숫자를 문자열로 변환하고 replace 메서드를 활용해서 3자리마다 콤마를 찍습니다.

const number = 100000;
const formattedNumber = number.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ','); 
//10,000
console.log(formattedNumber);

 

3. 정규 표현식 사용

직접 커스텀 함수를 만들어서 3자리 마다 콤마를 찍을 수 있습니다.

이 방법은 코드줄수가 늘어나지만 유연하게 원하는 커스텀이 가능합니다.

 

function formatNumber(number) {
    const parts = number.toString().split('.');
    parts[0] = parts[0].replace(/\B(?=(\d{3})+(?!\d))/g, ',');
    return parts.join('.');
}

const number = 100000;
const formattedNumber = formatNumber(number); 
//10,000
console.log(formattedNumber);

 

🤷‍♂️ 마지막으로

---

개발을 하다보면 가격표, 금액을 표시해야 되는 데이터들이 있습니다.

자바스크립트(javascript)에서 다양한 방법으로 가격표, 금액에 콤마를 찍을 수 있습니다.

위에 3가지 자바스크립트(javascript)에서 천단위 마다 콤마를 찍는 방법을 알아봤습니다.

저는 toLocaleString 자주 사용하며 사용자편의를 고려해서 가격표와 금액의 데이터를 표시할 때 콤마를 찍어주면 가독성에 더 좋습니다.

 

---

 

재밌는 오늘의 띠별 운세 보고 가세요! 

 

 

https://cometruedream.tistory.com/247

[React] Tailwind 한줄, 두줄, 세줄 효과 className 커스텀

 

 

https://cometruedream.tistory.com/243

NestJS Lifecycle (생명주기) 개념

 

 

https://cometruedream.tistory.com/242

리액트 Vite Proxy 활용한 CORS 오류 해결

 

 

https://cometruedream.tistory.com/241

React 폴더구조 FSD 기능 분활 설계 아키텍처

 

 

https://cometruedream.tistory.com/244

쉽게 이해하고 사용할수 있는 Prisma 명령어 정리

 

 

https://fnfentermagazine.com/%ec%9e%90%eb%b0%94%ec%8a%a4%ed%81%ac%eb%a6%bd%ed%8a%b8-%ec%88%ab%ec%9e%90-%ec%9e%90%eb%a3%8c%ea%b5%ac%ec%a1%b0%ec%9d%98-%ea%b0%9c%eb%85%90%ea%b3%bc-%eb%82%b4%ec%9e%a5%ed%95%a8%ec%88%98/

[자바스크립트 2탄] 자바스크립트 숫자 자료구조의 개념과 내장함수