[JavaScript] 돈(money),숫자 세 자리마다 ,(콤마=쉼표) 찍는 법

오늘은 돈이나 숫자 3자리마다 , (쉼표, 콤마)를 찍어보는 것을 알아보도록 하겠습니다.

설명에 앞서 

 

서버에서 돈이나 숫자 데이터를 받아서 화면에 나타낼 때, 컴마를 찍으려고 한 적 많으실 겁니다.

방법이 두 가지 있는데 아마 첫 번째 방법이 가장 무난하고 간단하다고 생각합니다.

 

간단한 방법부터 알아보도록 하죠.

 

1. toLocaleString() 함수 이용하기

number.toLocaleString(locales, options)

 

콤마를 찍으려는 숫자와 locales 그리고 options를 넣어서 코드를 실행하면 되는 구조입니다.

 

locales 에는 국가의 코드를 넣어야 하는데.... 엄청나게 많습니다.

https://www.iana.org/assignments/language-subtag-registry/language-subtag-registry

 

여기서 원하는 국가의 코드를 찾아서 넣으면 될 것 같습니다.

한국이면 ko, 미국이면 en 이런식으로요.

 

option 에는 

• currency : 통화 표시를 설정합니다.
• currencyDisplay : "symbol" (기본값), "code", "name" 중 하나를 선택할 수 있습니다. 
• localeMatcher: 지역 일치 여부를 설정합니다. "best-fit" (기본값) 또는 "lookup" 중 하나를 선택할 수 있습니다. "best-fit"은 가장 적절한 지역 설정을 사용하고, "lookup"은 정확한 지역 설정을 사용합니다.
• maximumFractionDigits: 소수점 이하의 최대 자릿수를 설정합니다. 0부터 20 사이의 값을 사용할 수 있습니다.
• maximumSignificantDigits: 최대 유효 숫자 자릿수를 설정합니다. 1부터 20 사이의 값을 사용할 수 있습니다.
• minimumFractionDigits: 소수점 이하의 최소 자릿수를 설정합니다. 0부터 20 사이의 값을 사용할 수 있습니다.
• minimumIntegerDigits: 정수 부분의 최소 자릿수를 설정합니다. 1부터 21 사이의 값을 사용할 수 있습니다.
• minimumSignificantDigits: 최소 유효 숫자 자릿수를 설정합니다. 1부터 21 사이의 값을 사용할 수 있습니다.
• style: 숫자 형식을 설정합니다. "currency", "decimal" (기본값), "percent" 중 하나를 선택할 수 있습니다.
• useGrouping: 그룹 구분 기호 사용 여부를 설정합니다. 기본적으로 true로 설정되어 있으며, 숫자를 천 단위로 그룹화하여 표시합니다. false로 설정하면 그룹 구분 기호를 사용하지 않습니다.

예시

const number = 1234567.89;
const options = {
  style: "currency",
  currency: "USD",
 currencyDisplay: "name",
  maximumFractionDigits: 2,
  minimumFractionDigits: 2,
  useGrouping: true
};

const formattedNumber = number.toLocaleString("en-US", options);
console.log(formattedNumber); // "1,234,567.89 US Dollars"

1. style 은 돈으로 설정

2. currency는 미국으로 설정

3. currencyDisplay는 이름으로 설정

4. maximumFractionDigits는 2로 설정 (소수점 두 자리까지 다 보여주는 형식)

5. minimumFractionDigits 도 2로 설정 (최소 보여줘야 하는 소수점 자릿수)

6. 그룹 구분 기호 사용을 true로 설정

 

이렇게 하면 위의 결과처럼 소수점 두 자리까지 다 보여주고, 3자리마다 컴마를 찍고, 뒤에 무슨 통화로 변경했는지 알 수 있습니다.

 

이런 식으로 자신이 원하는 나라의 숫자로 변경가능합니다!

 

2. 정규식(Regular Expression) 이용하기(feat. replace())

https://mizzo-dev.tistory.com/entry/JavaScript%EC%A0%95%EA%B7%9C%EC%8B%9D-%EC%88%AB%EC%9E%90%EC%97%90-1000%EB%8B%A8%EC%9C%84%EB%A1%9C-%EC%BD%A4%EB%A7%88%EC%89%BC%ED%91%9C-%EA%B5%AC%EB%B6%84%EC%9E%90-%EB%84%A3%EA%B8%B0

정규식 관련 설명이 잘 되어있는 사이트를 발견했습니다. 이 분의 해석을 보면서 3자리마다 콤마 찍는 법을 알아보아요ㅎㅎ

 

const num1 = 12345.6789;
const num2 = -12345.6789;

const money1 = num1.toString()
  .replace(/\B(?<!\.\d*)(?=(\d{3})+(?!\d))/g, ",");
const money2 = num2.toString()
  .replace(/\B(?<!\.\d*)(?=(\d{3})+(?!\d))/g, ",");
 
console.log(money1)    //12,345.6789
console.log(money2)    //-12,345.6789

 

이렇게 정규식과 replace 함수를 이용하여 3자리마다 , 를 찍어주면 됩니다.

 

소감

처음에 toLocaleString option 부분은 조금 생소할 수 있겠지만 직접 몇 번 사용하면서 연습해 보면 느낌이 올 것입니다. 개발자는 직접 사용해 보면서 알아갈 수 있다는 재미가 있는 것 같아요. 다른 직무는 한 치 앞을 모르는 일들만 있는데 개발자는 무슨 동작을 하는지는 알 수 있는 장점이 있습니다.

---

출처 : https://hianna.tistory.com/441

[Javascript] 숫자 3자리(천단위) 마다 콤마 찍는 2가지 방법

https://mizzo-dev.tistory.com/entry/JavaScript%EC%A0%95%EA%B7%9C%EC%8B%9D-%EC%88%AB%EC%9E%90%EC%97%90-1000%EB%8B%A8%EC%9C%84%EB%A1%9C-%EC%BD%A4%EB%A7%88%EC%89%BC%ED%91%9C-%EA%B5%AC%EB%B6%84%EC%9E%90-%EB%84%A3%EA%B8%B0

[JavaScript][정규식] 숫자에 1000단위로 콤마(쉼표 ,) 구분자 넣기