숫자 콤마 처리 - Intl.NumberFormat / toLocaleString 자세히 알아보기

값이 큰 숫자를 화면에 나타낼 때, 가독성을 위해 콤마 처리를 해야 할 때가 많다.

콤마 처리가 된 가격

 

 

숫자에 콤마 처리를 하는 가장 간단한 방법은 Number.toLocaleString() 메소드를 사용하는 것이다.

// 1. toLocaleString을 사용한 콤마 포맷팅
const formatNumber = (number) => number.toLocaleString();
console.log(formatNumber(4234124412));  // 4,234,124,412

 

위 방법 외에도 Intl.NumberFormat API와 정규표현식을 사용하는 방법이 있다.

// 2. Intl.NumberFormat을 사용한 콤마 포맷팅
const numberFormatter = new Intl.NumberFormat();

const formatNumber = (number) => numberFormatter.format(number);
console.log(formatNumber(4234124412));  // 4,234,124,412

// 3. 정규표현식을 사용한 콤마 포맷팅
const commaRegex = /\B(?=(\d{3})+(?!\d))/g;
const formatNumber = (number) => number.toString().replace(commaRegex, ',');
console.log(formatNumber(4234124412));  // 4,234,124,412

 

 

이 중에서 어떤 방법이 가장 빠를지 궁금해서 벤치마크를 측정해 보았다.

 

 

성능 비교

벤치마크 측정은 jsbenckmark 사이트에서 진행했으며, 결과는 아래와 같다.

콤마 메소드 성능 비교

 

셋 다 고만고만한 성능을 보여주지만 정규표현식이 가장 빠르고, Intl.NumberFormat이 toLocaleString보다 느린 것을 볼 수 있다.

 

느린 이유는 Intl 모듈이 무거워서(= 내부적으로 제공되는 기능이 많아서) 그런 것으로 보인다.

 

 

Intl.NumberFormat과 toLocaleString의 차이점

Date.prototype.toLocaleString(locales[, options]) / Array.prototype.toLocaleString(locales[, options])

// toLocaleString 사용 예시
// 1. 일반 숫자에 사용
const price = 423134;
console.log(price.toLocaleString());  // '423,134'

// 2. 날짜에 사용(locales 지정)
const date = new Date();
console.log(date.toLocaleString('en-US'));  // '10/21/2024, 4:00:56 PM'
console.log(date.toLocaleString('ko-KR'));  // '2024. 10. 21. 오후 4:01:08'
console.log(date.toLocaleString());  // navigator.language 기준, '10/21/2024, 4:00:56 PM'

// 3. 날짜에 사용(locales + options 지정)
console.log(date.toLocaleString('ko-KR', {
    year: '2-digit',
    month: '2-digit',
    day: '2-digit',
    era: 'long',
}));  // '서기 24/10/21'

 

toLocaleString은 사실 특정 국가의 날짜를 원하는 문자열로 출력하는 용도로 주로 사용되는 메소드이며, locales, options 인자를 받을 수 있다.

 

인자와 함께 호출하는 경우 내부적으로 Intl.DateTimeFormat을 호출하도록 되어 있으며, 브라우저에서 Intl.DateTimeFormat을 지원하지 않는다면 해당 인자는 무시된다.

 

다만 toLocaleString이 호출될 때마다 각각의 Intl.DateTimeFormat 객체가 생성되므로, 날짜 포맷팅 용도 + 동일한 인자로 여러번 호출해야 하는 경우에는 하나의 Intl.DateTimeFormat 객체를 선언하여 사용하는 것이 좋다.

 

숫자 콤마처리 기능은 Array.prototype.toLocaleString()로서 호출되었을 경우인데, 아래처럼 배열의 메소드로 호출했을 때도 콤마가 붙는 것을 볼 수 있다.

const arr = ['안녕', '하세요', '공부하기', '싫다'];
console.log(arr.toLocaleString());  // '안녕,하세요,공부하기,싫다'

 

 

Intl.NumberFormat

// Intl.NumberFormat 사용 예시
// 1. 억/천/만 단위 포맷팅
const formatter = new Intl.NumberFormat('ko', {
  notation: 'compact',
});
console.log(formatter.format(2147000000));  // '21억'
console.log(formatter.format(6000000));  // '600만'

// 2. 원화 포맷팅
const formatter = new Intl.NumberFormat('ko', {
  currency: 'KRW',
  style: 'currency',
});
console.log(formatter.format(2147000000));  // '₩2,147,000,000'
console.log(formatter.format(6000000));  // '₩6,000,000'

 

위 예시처럼 콤마 외에도 금액, 간단 표기 등 다양한 포맷팅 옵션을 제공한다.

 

자세한 사용법은 mdn을 참고하자.

 

 

참고 링크

Intl.NumberFormat - JavaScript | MDN

Array.prototype.toLocaleString() - JavaScript | MDN

Date.prototype.toLocaleString() - JavaScript | MDN