input에 입력된 숫자에 콤마 찍기

1. 숫자에 콤마를 넣고 싶어!

• input창에 숫자를 입력하면 콤마 없이 나타난다.
• 하지만 숫자를 입력했을 때 셋째 자리마다 콤마를 찍고 싶을 때가 있다.

  1234567890       //일반
  1,234,567,890    //콤마 추가

어떻게 하면 숫자에 콤마를 추가할 수 있을까?
대부분 알려진 방법은 정규식으로 콤마를 추가하는 방법이다!
하지만 오늘은 toLocaleString를 사용해보자~

2. toLocaleString는 무엇인가요?

• toLocaleString는 숫자를 지역별 포맷으로 반환한다.(문자열로 반환)
• 또한, 원본을 변경하지 않는다.
• 이 속성에는 여러 인자가 있는데, 아래 표를 살펴보자!

인자	설명	예시
ko-KR	셋째자리에 콤마 추가	"3,540,000"
cs-CZ	셋째자리에 띄어쓰기 추가	"3 540 000"
da-DK	셋째자리에 온점 추가	"3.540.000"
de-CH	셋째자리에 따옴표 추가	"3’540’000"

• 구체적인 사용방법은 아래와 같다.

const a = 3540000;

console.log(a.toLocaleString('ko-KR'))  //"3,540,000"
console.log(a.toLocaleString('cs-CZ'))  //"3 540 000"
console.log(a.toLocaleString('da-DK'))  //"3.540.000"
console.log(a.toLocaleString('de-CH'))  //"3’540’000"

3. input에 입력한 숫자에 콤마를 넣어보자

아래 예시는 입력칸에 숫자를 입력했을 때, 콤마가 붙은 형태로 보여준다.
작성한 코드에 대해 간단히 알아보자

See the Pen input-split-number by KumJungMin (@kumjungmin) on CodePen.

(1). html에 input 추가

[1] 입력칸을 만들기 위해 id="number"인 input을 추가한다.

<!--html-->
<input type="text" id="number"/>   <!--[1]-->

(2). js로 컨트롤하기

[1] id="number"인 input을 가져온다.
[2] 키입력이 있을 때마다 포맷팅을 해야하므로 keyup이벤트를 사용한다.

const input = document.querySelector('#number');      //[1]
input.addEventListener('keyup', function(e) { ... })  //[2]

[3] e.target.value를 사용해 input에 입력된 값을 가져온다.

...
input.addEventListener('keyup', function(e) {
  let value = e.target.value;                 //[3]
  ...
})

[4]에서 왜 input값에 replaceAll, Number처리를 하나요?

...
input.addEventListener('keyup', function(e) {
  let value = e.target.value;                 
  value = Number(value.replaceAll(',', ''));  //[4]
  ...
})

: 우리는 키입력이 있을 때마다, 포맷팅된 문자열을 input에 넣을 것이다.
: 그렇기에 input에서 "XXX,XX"처럼 콤마가 포함된 문자열이 온다.
: 하지만 toLocaleString는 숫자를 입력받아야 한다.
: 그러므로 replaceAll(',', '')로 콤마를 제외하고, Number()로 숫자 처리를 해줘야 한다.

[5] toLocaleString('ko-KR')을 해서 숫자에 콤마를 추가한다.
[6] 마지막으로 input.value을 사용해 포맷팅된 값을 input에 넣는다.

...
input.addEventListener('keyup', function(e) {
  let value = e.target.value;                 
  value = Number(value.replaceAll(',', ''));
  const formatValue = value.toLocaleString('ko-KR'); //[5]
  input.value = formatValue;                         //[6]
})

추가적으로 문자를 입력했을 때 0으로 초기화하려면 아래와 같이 하면 된다.

const input = document.querySelector('#number');
input.addEventListener('keyup', function(e) {
  let value = e.target.value;
  value = Number(value.replaceAll(',', ''));
  if(isNaN(value)) {         //NaN인지 판별
    input.value = 0;   
  }else {                   //NaN이 아닌 경우
    const formatValue = value.toLocaleString('ko-KR');
    input.value = formatValue;
  }
})

출처
아래 링크로 가면 더 알 수 있다구~ 👍👍

• MDN Web Docs, toLocaleString
• hianna님의 포스팅, 숫자 3자리(천단위) 마다 콤마 찍는 2가지 방법