JS / 자바스크립트 / 천단위 , 콤마 찍기와 콤마 없애기 / 공식문서 기준 완벽정리 / 아과노트

안녕하세요, 

 

아과노트 입니다.

 

오늘은 자바스크립트에서 자주 사용되는 천 단위마다' , ' 콤마(comma) 찍는 것과, 

콤마(comma)를 없애는 방법에 대해 알아보도록 하겠습니다.

 

JavaScript logo

먼저 천 단위 마다 콤마(comma)를 찍는것부터 알아보겠습니다.

 

1. 자바스크립트 천단위 콤마 찍기

 

예를 들면 다음과 같습니다.

 

1000 -> 1,000

10000 -> 10,000

352400 -> 352,400

 

이런 식입니다.

 

이를 위한 방법은 아래와 같이 두 가지가 있습니다.

 

1) 자바스크립트(JS) 내장함수인 toLocaleString 이용
2) 정규식 이용

 

가장 쉬운 방법으론 toLocaleString을 이용하는 방법이 있습니다.

 

1) 자바스크립트(JS) 내장함수인 toLocaleString 이용

 

자바스크립트의 공식문서 격인 w3schools에 가서 설명을 들어보겠습니다.

 

https://www.w3schools.com/jsref/jsref_tolocalestring_number.asp

JavaScript Number toLocaleString() Method

 

toLocaleString의 정의: toLocaleString()은 현지 언어 형식을 사용하여 숫자를 문자열로 반환합니다.
언어 형식은 로케일 설정에 따라 다릅니다.

 

정의와 같이 먼저 알아둘 것은 숫자타입에 toLocaleString을 이용하여 콤마를 찍으면 타입이 Number에서 String으로 바뀌는 것입니다.

뭐... 어떻게 해서든 콤마가 들어가면 최종 타입은 String이 될 것이긴 합니다.

 

예제를 보면 다음과 같습니다.

let num = 1000000;
let text = num.toLocaleString("ko-KR");

이러면 바로 1000000이 1,000,000으로 변경됩니다.

참 쉽게 변경이 되죠??

 

여기서 조심해야 할 것은 num은 문자(String)가 아닌 숫자(Number) 타입이어야 한다는 것입니다.

toLocaleString은 Number의 내장함수이기 때문입니다.

 

let = "1000000"
let text = num.toLocaleString("ko-KR"); //에러발생

 

toLocaleString은 option으로  로케일(locale)을 받습니다.

로케일에 따라 다음과 같이 표현이 됩니다.

 

Locale Code	Number representation
ar-SA	١٬٠٠٠٬٠٠٠
bn-BD	১০,০০,০০০
bn-IN	১০,০০,০০০
cs-CZ	1 000 000
da-DK	1.000.000
de-AT	1 000 000
de-CH	1’000’000
de-DE	1.000.000
el-GR	1.000.000
en-AU	1,000,000
en-CA	1,000,000
en-GB	1,000,000
en-IE	1,000,000
en-IN	10,00,000
en-NZ	1,000,000
en-US	1,000,000
en-ZA	1 000 000
es-AR	1.000.000
es-CL	1.000.000
es-CO	1.000.000
es-ES	1.000.000
es-MX	1,000,000
es-US	1,000,000
fi-FI	1 000 000
fr-BE	1 000 000
fr-CA	1 000 000
fr-CH	1 000 000
fr-FR	1 000 000
he-IL	1,000,000
hi-IN	10,00,000
hu-HU	1 000 000
id-ID	1.000.000
it-CH	1’000’000
it-IT	1.000.000
ja-JP	1,000,000
ko-KR	1,000,000
nl-BE	1.000.000
nl-NL	1.000.000
no-NO	1 000 000
pl-PL	1 000 000
pt-BR	1.000.000
pt-PT	1 000 000
ro-RO	1.000.000
ru-RU	1 000 000
sk-SK	1

우리는 주로 ko-KR을 사용하면 될 것 같습니다.

 

브라우저 호환은 다음과 같습니다.

Chrome	IE	Edge	Firefox	Safari	Opera
Yes	11	Yes	Yes	Yes	Yes

 

IE11 이상만 되면 사용이 가능하겠네요.

이제 IE도 안녕이니까... toLocaleString을

 

2) 정규식 이용하기

 

다음 방법으로는 정규식을 이용해서 콤마를 찍는 방법입니다.

 

근데 정규식을 이해하기는 쉽지 않은데... 왜 이것을 굳이 사용하는 것일까요??

 

이유는 혹시라도 모를 IE 11 이전에 브라우저도 지원을 하기 위해서입니다.

 

IE가 참 사람을 여럿 고생시키네요...ㅡㅡ;;

 

그래서 정규식을 이용해서 콤마를 찍는 함수를 만든 후 그 함수를 천 단위 콤마가 필요할 때마다 호출하는 방법입니다.

 

함수와 사용예제는 다음과 같습니다.

 

function numberWithCommas(val) {
  return val.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",");
}

let num = 1000000
let comma_num = numberWithCommas(num)

 

그럼 두 번째로 천 단위 찍힌 콤마를 없애서 number 타입으로 변경하는 것을 알아보겠습니다.

 

2.  자바스크립트 천단위 콤마 제거하기

 

없애는 방법은 간단합니다.

문자열중에 콤마를 치환해 버리면 됩니다.

 

let comma_num = "1,000,000";

// 콤마 제거
let num_str = comma_num.replace(",", ""));
// Number 타입으로 변경
let number = Number(num_str)

//콤마제거와 Number 한방에 변경
let num = Number(comma_num.replace(",", "")));

 

이러면 다시 숫자로 변환해서 덧셈, 뺄셈 등 사칙연산이 가능합니다.

 

자바스크립트로 숫자에 천단위 콤마 찍기와 콤마 해제하기는 자주 사용하기 때문에 알아두면 좋을 것 같습니다.

 

오늘은 여기까지입니다.

 

고생하셨습니다.