[JS]-NumberFormat 메서드!

badassong·2023년 5월 5일
0

JS

목록 보기
22/31
post-thumbnail

Intl.NumberFormat 함수는 숫자의 형식을 설정하는 함수로 지정된 지역의 통화 또는 백분율을 표시하는데 사용할 수 있다!

new Intl.NumberFormat('ko-KR', {
  notation: 'compact',
  maximumFractionDigits: 1,
}).format(1748293952)

// '17.5억'

new Intl.NumberFormat('en-US', {
  notation: 'compact',
  maximumFractionDigits: 1,
}).format(1748293952)

// '1.7B'

maximumSignificantDigits 프로퍼티는 유효한 숫자를 표시하기 위해 설정할 수 있는 프로퍼티이다. 좀 더 쉽게 설명하자면, "몇 자리까지 반올림할 것인가?"를 설정하는 프로퍼티이다.

유튜브를 만들어보다가 조회 수를 유튜브처럼 표시하고 싶어서 찾아본 메서드이다.
적용한 코드는 이렇다!

 <p className="text-slate-500 text-sm">
              {new Intl.NumberFormat(
                "ko-KR",

                {
                  notation: "compact",
                  maximumFractionDigits: 1,
                  maximumSignificantDigits: 3,  
                }
              ).format(item.statistics.viewCount)}
              회 ∙{timeForToday(item.snippet.publishedAt)}
            </p>

결과화면!

profile
프론트엔드 대장이 되어보쟈

0개의 댓글