Lab | JavaScript, 가격(숫자) 천 단위에서 콤마 찍는 방법이 있을까?

xedni·2020년 11월 22일
0

Xedni's LAB

목록 보기
3/6
post-thumbnail

숫자는 천단위에서 주로 콤마를 찍는다.
가독성을 높여주며 더욱 익숙한 형태이다.

1. 고민해보자

하지만 자바스크립트에는 숫자를 다양한 방식으로 보여주는 기능이 없다.
아무리 찾아봐도 없다. (있다면 댓글로 알려주십셔)
하지만 없다고 못할 우리가 아니다.... 기본적인 메서드를 이용해서 찍어보자.

2. 해결해보자

1) toString

: 숫자로 안되면 String으로 바꿔보자.

.toString()
  • Number의 내장 메서드인 toString 을 이용해서 먼저 텍스트로 바꾸어준다.
  • toString은 어떤 형태도 전부 스트링으로 변환시켜준다.

2) replace

: replace로 하나의 규칙을 만들고 그 규칙에 따라 쉼표를 찍어보자.

.replace(패턴, ',')
  • replace는 어떤 패턴에 일치하는 일부 또는 모든 부분이 교체된 새로운 문자열을 반환한다.
  • 즉, 3번째라는 패턴마다 해당부분에 ,라는 문자열로 교체하면 되는 것이다.

3) 정규 표현식

: replace에서 패턴은 정규 표현식으로 표현할 수 있다.

/\B(?=(\d{3})+(?!\d))/g
  • /는 시작점과 끝점을 의미한다.
  • 끝점 뒤의 i, g, m은 플래그라고 부르며 검색방법에 해당한다.
  • 나는 g(Global)을 이용할 것이다.

4) 최종

: 3가지 모두를 이용하면 아래와 같아진다.

Number.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ',')
  • Number에 쉼표를 찍고싶은 숫자를 넣으면 된다!! 성공이다. 참쉽죠?
profile
"꾸준한 삽질과 우연한 성공"

2개의 댓글

comment-user-thumbnail
2020년 12월 19일

자바스크립트 내장 객체인 Intl 객체의 NumberFormat을 통해 쉼표 찍을 수 있습니다.
new Intl.NumberFormat().format(number) 형태로 쓰시면 가능해요

1개의 답글