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

 

 

숫자 3자리마다(천단위) 콤마를 찍어서 문자열로 리턴하는 2가지 방법을 소개합니다.

 

1. 정규식(Regular Expression) 이용하기
2. toLocaleString() 함수 이용하기

 

 

1. 정규식(Regular Expression) 이용하기

const n1 = 12345.6789;
const n2 = -12345.6789;

const cn1 = n1.toString()
  .replace(/\B(?<!\.\d*)(?=(\d{3})+(?!\d))/g, ",");
const cn2 = n2.toString()
  .replace(/\B(?<!\.\d*)(?=(\d{3})+(?!\d))/g, ",");

document.writeln(cn1);
document.writeln('<br>');
document.writeln(cn2);

 

 

정규식을 사용하여 천단위마다 콤마를 추가한 예제입니다.

 

 

 

2. toLocaleString() 함수 이용하기

toLocaleString() 함수

toLocaleString() 함수를 사용하여 간단하게 천단위마다 콤마를 추가할 수 있습니다.

number.toLocaleString(locales, options)

toLocaleString() 함수는 숫자를 로컬의 language format에 맞는 문자열로 변경해 줍니다.

파라미터로 아무것도 전달되지 않으면 사용자 로컬 환경의 locale을 default로 사용합니다.

 

 

 파라미터 

locales

코드	설명	예시 (1234567)
ar-SA	Arabic (Saudi Arabia)	١٬٢٣٤٬٥٦٧
bn-BD	Bangla (Bangladesh)	১২,৩৪,৫৬৭
bn-IN	Bangla (India)	১২,৩৪,৫৬৭
cs-CZ	Czech (Czech Republic)	1 234 567
da-DK	Danish (Denmark)	1.234.567
de-AT	Austrian German	1 234 567
de-CH	"Swiss" German	1’234’567
de-DE	Standard German (as spoken in Germany)	1.234.567
el-GR	Modern Greek	1.234.567
en-AU	Australian English	1,234,567
en-CA	Canadian English	1,234,567
en-GB	British English	1,234,567
en-IE	Irish English	1,234,567
en-IN	Indian English	12,34,567
en-NZ	New Zealand English	1,234,567
en-US	US English	1,234,567
en-ZA	English (South Africa)	1 234 567
es-AR	Argentine Spanish	1.234.567
es-CL	Chilean Spanish	1.234.567
es-CO	Colombian Spanish	1.234.567
es-ES	Castilian Spanish (as spoken in Central-Northern Spain)	1.234.567
es-MX	Mexican Spanish	1,234,567
es-US	American Spanish	1,234,567
fi-FI	Finnish (Finland)	1 234 567
fr-BE	Belgian French	1 234 567
fr-CA	Canadian French	1 234 567
fr-CH	"Swiss" French	1 234 567
fr-FR	Standard French (especially in France)	1 234 567
he-IL	Hebrew (Israel)	1,234,567
hi-IN	Hindi (India)	12,34,567
hu-HU	Hungarian (Hungary)	1 234 567
id-ID	Indonesian (Indonesia)	1.234.567
it-CH	"Swiss" Italian	1’234’567
it-IT	Standard Italian (as spoken in Italy)	1.234.567
ja-JP	Japanese (Japan)	1,234,567
ko-KR	Korean (Republic of Korea)	1,234,567
nl-BE	Belgian Dutch	1.234.567
nl-NL	Standard Dutch (as spoken in The Netherlands)	1.234.567
no-NO	Norwegian (Norway)	1 234 567
pl-PL	Polish (Poland)	1 234 567
pt-BR	Brazilian Portuguese	1.234.567
pt-PT	European Portuguese (as written and spoken in Portugal)	1 234 567
ro-RO	Romanian (Romania)	1.234.567
ru-RU	Russian (Russian Federation)	1 234 567
sk-SK	Slovak (Slovakia)	1 234 567
sv-SE	Swedish (Sweden)	1 234 567
ta-IN	Indian Tamil	12,34,567
ta-LK	Sri Lankan Tamil	12,34,567
th-TH	Thai (Thailand)	1,234,567
tr-TR	Turkish (Turkey)	1.234.567
zh-CN	Mainland China, simplified characters	1,234,567
zh-HK	Hong Kong, traditional characters	1,234,567
zh-TW	Taiwan, traditional characters	1,234,567

 

options

• currency
• currencyDisplay : "symbol"(default), "code", "name"
• localeMatcher : "best-fit"(default), "lookup"
• maximumFractionDigits : 0~20 (default : 3)
• maximumSignificantDigits : 1~20 (default : 21)
• minimumFractionDigits : 0~20(default: 3)
• minimumIntegerDigits : 1~21 (default: 1)
• minimumSignificantDigits : 1~21 (default : 21)
• style : "currency", "deciaml" (default), "percent"
• useGrouping : true(default) /false

 

예제1. toLocaleString() 함수 사용하기

const n1 = 12345.6789;
const n2 = -12345.6789;

const cn1 = n1.toLocaleString();
const cn2 = n2.toLocaleString();

document.writeln(cn1);
document.writeln('<br>');
document.writeln(cn2);

이 예제는 toLocaleString() 함수를 이용하여 숫자를 콤마가 있는 문자열로 변환하였습니다.

이때, toLocaleString() 함수의 파라미터로는 아무것도 전달하지 않았는데

그러면 사용자 PC의 환경 locale을 따르게 됩니다.

 

사용자 PC환경의 locale은 다음과 같이 확인해 볼수 있습니다.

document.writeln(navigator.language);

저는 "ko-KR"이 나옵니다.

자동으로 "ko-KR" locale이 적용이 되었을 것입니다.

이 결과가 다른 값이 나온다면, 위 locale 표에서 number format 예시를 확인하고,

숫자 3자리마다 콤마를 찍어주는 locale로 설정을 해주면 됩니다.

 

 

예제2. locale 값 지정하기

const n1 = 12345.6789;
const n2 = -12345.6789;

const cn1 = n1.toLocaleString('ko-KR');
const cn2 = n2.toLocaleString('ko-KR');

document.writeln(cn1);
document.writeln('<br>');
document.writeln(cn2);

toLocaleString()을 호출할 때, 파라미터로 locale 코드를 넘겨주었습니다.

이제 사용자의 PC가 어떤 locale이든지, 위 코드를 실행할 때는 'ko-KR' locale이 적용될 것입니다.

 

 

예제3. 소수점 자릿수 지정하기

const n1 = 12345.6789;
const n2 = -12345.6789;

const option = {
  maximumFractionDigits: 4
};
const cn1 = 
      n1.toLocaleString('ko-KR', option);
const cn2 = 
      n2.toLocaleString('ko-KR', option);

document.writeln(cn1);
document.writeln('<br>');
document.writeln(cn2);

예제1과 예제2의 결과에 조금 이상한 점이 있습니다.

원본 숫자인 n1과 n2는 소수점 4자리까지 표현하고 있는데

toLocaleString() 함수를 통해서 나온 결과는 소수점 3자리까지만 표현하고 있습니다.

이것은 toLocaleString() 함수의 default fraction digit 값이 3이기 때문입니다.

위 예제에서는 소수점 4자리까지 표현해주어야 하므로,

toLocaleString() 함수를 호출할 때 두번째 파라미터로 option 객체를 전달하였습니다.

그리고, 이 option 객체 안에는 maximumFractionDigits 값이 4로 지정되었습니다.

따라서 위 예제는 소수점 4자리까지 잘 출력되는 것을 확인 할 수 있습니다.

 

---

 

Javascript에서 소수점 천단위마다 콤마를 찍어서, 문자열(string)로 리턴하는 방법을 알아보았습니다.