Intl.NumberFormat

프로젝트를 하다보니
숫자를 표현해줘야 할때가 있습니다.

예를 들어 유튜브 API를 사용할때 유튜브 동영상 조회수, 좋아요 수
혹은 가격을 표현해줘야 할때

이런 숫자를 표현해줄때 100, 1000 같은 비교적 작은 단위라면 상관없지만

백만, 천만, 억단위로 올라가면 얼마만큼의 단위인지 알기 쉽지않아서 가독성이 떨어집니다.

그래서 보통 이럴 경우에 1000 = 1K,1천 1,000,000 = 1M 1백만 으로 표기해서

사용자가 쉽게 이해할 수 있도록 도와주고 있습니다.

그래서 저 같은 경우

프로젝트를 할때 공통함수로 숫자를 줄여 단위로 표현해주는 함수를 생성했었습니다.

부끄럽지만

export const G_makeKUnit = (num: number | undefined) => {
  let man = 0
  if (num && num >= 1000 && num < 1000000) {
     man = num / 1000
     let manToStr = G_comma(Math.floor(man))
     return manToStr + 'K'
   } else if (num && num >= 1000000) {
     man = num / 1000000
     let manToStr = G_comma(Math.floor(man))
     return manToStr + 'M'
   } else return num
}

이런식으로 작성했습니다.

이렇게 보면 별 문제가 없어보이지만

코드를 더 좋은 방향으로 갈 수 있도록 리팩토링하는게 개발자라고 생각하다보니

우연히 Intl.NumberFormat에대해 알게되었습니다.
물론 아시는 분이 많겠지만 Intl.NumberFormat를 알게되면서 제 코드를 더 줄일 수 있다고 생각이 들었습니다.

Intl.NumberFormat을 사용하면서

export const G_makeKUnit = (num: number | undefined) => {
  const formatter = new Intl.NumberFormat('en', {notation: 'compact'})
  if(num) return formatter.format(num)
  else return num
}

이런식으로 단 3줄만으로 숫자를 1000000 === 1M 으로 줄일 수 있었습니다.
기능적으로 차이는 없지만 가독성은 훨씬 좋아진것 같습니다.

이외에도 Intl에 많은 기능이 있어서 다른 기능도 찾아보도록 하겠습니다.