3자리 마다 콤마로 바꿔주는 함수 구현하기

tohero·2022년 1월 24일
0

결과

function commaNumber(num) {
  if (typeof num !== 'string' && typeof num !== 'number') {
    return num;
  }

  return num.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ',');
}

분석하기

  1. \B는 경계(맨 앞, 맨 뒤, white space가 없는 경우)가 아닌 단어에 매칭된다.
    • 구분자(,)를 삽입할 때 경계선에 삽입하는 경우 ,123 혹은 123,이 될 수 있기 때문에 넣어준다.
  2. x+는 x가 1회 이상 반복되는 경우 일치한다.
    • \d{3}+ 를 예시로 들면 1234567에서 앞에서 부터 123456과 456에 매칭된다. 이 코드에서는 \B와 접목시켜 234567과 567을 매칭시키고 그 앞에 콤마를 붙이기 위해 사용되었다.
  3. x(?!y) x 뒤에 y가 없는 경우에만 x와 일치한다. (negated lookahead)
    • (?!\d) 이 식이 빠진다면, 456도 매칭이되고 567도 매칭이 되며, 모든 3자리 숫자에 매칭이 되기 때문에 맨 뒤의 567을 제외한 모든 구간에 콤마가 붙게 된다.
'123456'.match(/(\d{3})+(?!\d)/); 
// 이 코드는 3개의 숫자가 1번이라도 반복되며, 뒤따라오는 숫자가 없는 경우에 일치한다 즉, 123456, 456이 선택된다.

'123456'.match(/\B(\d{3})+(?!\d)/g); 
// 이 코드는 경계를 무시하기 때문에, 456만이 매칭된다.
  1. x(?=y) x 뒤에 y가 따라오는 경우에만 x와 일치한다. (lookahead)
    • 123과 456의 사이를 찾기 위해 사용된다.
'123456'.replace(/(?=([6]))/g, ','); 
// 이 코드는 6만을 찾는다 하지만 6이 반드시 뒤따라 와야하며, ?= 의 x자리가 비어있기 때문에 5와 6사이의 경계를 가리키게 된다. 즉 반환 값은 12345,6 이다.

'123456'.match(/\B(?=(\d{3})+(?!\d)/g)); 
// 따라서 이 코드는 숫자 3이 1번 이상 반복되는 숫자 이면서 그 뒤에는 숫자가 없는 456과 앞 문자 123의 경계에 매칭이 된다.
  1. g 플래그를 붙이면 replace의 경우 표현식과 매칭되는 모든 단어를 치환한다. 따라서 붙여준다.
'1234567'.match(/\B(?=(\d{3})+(?!\d)/)); 
// 1,234567

'1234567'.match(/\B(?=(\d{3})+(?!\d)/g));
// 1,234,567

참고문서

profile
Front 💔 End

0개의 댓글