천 단위 구분 기호 표시 여부를 제어하는 방법

소개

숫자 123456를 포맷할 때, 천 단위를 쉼표로 구분한 "123,456" 또는 구분 기호가 없는 "123456"를 볼 수 있습니다. 숫자 그룹을 구분하는 문자를 그룹 구분 기호라고 하며, 영어권 지역에서는 일반적으로 천 단위 구분 기호로 알려져 있습니다.

상황에 따라 다른 포맷이 필요합니다. 재무 보고서는 일반적으로 큰 숫자를 읽기 쉽게 만들기 위해 그룹 구분 기호를 표시합니다. 일련번호, 제품 코드, ID 번호와 같은 기술적 표시는 혼동을 방지하기 위해 일반적으로 구분 기호를 생략합니다. Intl.NumberFormat의 useGrouping 옵션은 포맷된 출력에 이러한 구분 기호가 표시되는지 여부를 제어합니다.

이 가이드에서는 그룹화 구분 기호를 활성화 및 비활성화하는 방법, 로케일에 따라 구분 기호가 어떻게 달라지는지, 애플리케이션에서 각 설정을 언제 사용해야 하는지 설명합니다.

useGrouping false로 그룹화 구분 기호 비활성화

useGrouping를 false로 설정하면 포맷된 숫자에서 모든 그룹 구분 기호가 제거됩니다.

const formatter = new Intl.NumberFormat('en-US', {
  useGrouping: false
});

formatter.format(123456);
// "123456"

formatter.format(1234567.89);
// "1234567.89"

포맷된 출력에는 숫자가 아무리 커도 쉼표나 기타 그룹 문자가 포함되지 않습니다. useGrouping는 숫자 그룹화에만 영향을 미치고 소수점 포맷에는 영향을 미치지 않기 때문에 소수점 구분 기호는 유지됩니다.

이는 통화 및 단위를 포함한 모든 숫자 스타일에 적용됩니다.

new Intl.NumberFormat('en-US', {
  style: 'currency',
  currency: 'USD',
  useGrouping: false
}).format(1234567.89);
// "$1234567.89"

new Intl.NumberFormat('en-US', {
  style: 'unit',
  unit: 'kilometer',
  useGrouping: false
}).format(50000);
// "50000 km"

통화 기호와 단위 레이블은 정상적으로 표시되지만 숫자에는 내부 구분 기호가 없습니다.

useGrouping true로 그룹화 구분 기호 활성화

useGrouping를 true로 설정하면 그룹 구분 기호가 포함됩니다. 이것이 기본 동작이므로, 의도를 명확히 하거나 구성을 재정의할 때만 명시적으로 지정하면 됩니다.

const formatter = new Intl.NumberFormat('en-US', {
  useGrouping: true
});

formatter.format(123456);
// "123,456"

formatter.format(1234567.89);
// "1,234,567.89"

포매터는 영어 표기 규칙에 따라 세 자리마다 쉼표를 삽입합니다. 이를 통해 큰 숫자를 시각적으로 더 쉽게 읽을 수 있습니다.

true가 기본값이므로, 이 두 포매터는 동일합니다.

new Intl.NumberFormat('en-US', { useGrouping: true });
new Intl.NumberFormat('en-US');

두 포매터 모두 출력에 그룹 구분 기호를 포함합니다.

로케일에 따라 그룹화가 어떻게 달라지는지 이해하기

로케일마다 그룹화에 사용하는 문자가 다르고 그룹화 패턴도 다릅니다. useGrouping 옵션은 그룹화 발생 여부를 제어하고, 로케일은 어떤 문자가 어디에 표시되는지를 결정합니다.

new Intl.NumberFormat('en-US', {
  useGrouping: true
}).format(1234567);
// "1,234,567"

new Intl.NumberFormat('de-DE', {
  useGrouping: true
}).format(1234567);
// "1.234.567"

new Intl.NumberFormat('fr-FR', {
  useGrouping: true
}).format(1234567);
// "1 234 567"

영어는 쉼표를, 독일어는 마침표를, 프랑스어는 공백을 사용합니다. 세 가지 모두 그룹 구분 기호이지만, 각 로케일의 표기 규칙을 따르기 때문에 다르게 보입니다.

일부 로케일은 다른 그룹화 패턴을 사용합니다. 인도 숫자 표기법은 처음 세 자리를 그룹화한 후, 그 다음부터는 두 자리씩 그룹화합니다.

new Intl.NumberFormat('en-IN', {
  useGrouping: true
}).format(1234567);
// "12,34,567"

그룹 구분 기호는 오른쪽에서 세 자리 후에 나타나고, 그 다음부터는 두 자리마다 나타나 1,234,567 대신 12,34,567를 생성합니다.

useGrouping: false로 그룹화를 비활성화하면 구분 기호가 전혀 표시되지 않기 때문에 이러한 로케일별 차이가 사라집니다.

new Intl.NumberFormat('en-IN', {
  useGrouping: false
}).format(1234567);
// "1234567"

고급 그룹화 제어를 위한 문자열 값 사용하기

useGrouping 옵션은 그룹 구분 기호가 표시되는 시점을 더욱 세밀하게 제어할 수 있는 문자열 값을 허용합니다. 이러한 값은 Intl.NumberFormat V3 사양의 일부이며 최신 브라우저에서 지원됩니다.

"always" 값은 true와 동일하며 항상 그룹 구분 기호를 표시합니다.

new Intl.NumberFormat('en-US', {
  useGrouping: 'always'
}).format(1234);
// "1,234"

"auto" 값은 그룹화에 대한 로케일의 기본 설정을 따릅니다. 대부분의 로케일은 그룹 구분 기호를 표시하는 것을 선호하므로 실제로 "auto"는 "always"와 유사합니다. 이는 notation가 "compact"가 아닐 때의 기본값입니다.

new Intl.NumberFormat('en-US', {
  useGrouping: 'auto'
}).format(1234);
// "1,234"

"min2" 값은 첫 번째 그룹에 최소 두 자리 숫자가 있을 때만 그룹 구분 기호를 표시합니다. 네 자리 숫자의 경우 구분 기호가 표시되지 않습니다.

new Intl.NumberFormat('en-US', {
  useGrouping: 'min2'
}).format(1234);
// "1234"

new Intl.NumberFormat('en-US', {
  useGrouping: 'min2'
}).format(12345);
// "12,345"

숫자 1234는 첫 번째 그룹에 한 자리 숫자(1)만 있으므로 구분 기호가 표시되지 않습니다. 숫자 12345는 첫 번째 그룹에 두 자리 숫자(12)가 있으므로 구분 기호가 표시됩니다.

이 동작은 일부 로케일에서 숫자를 자연스럽게 형식화하는 방식과 일치합니다. 예를 들어 스페인어는 일반적으로 네 자리 숫자에 대해 그룹 구분 기호를 생략합니다.

new Intl.NumberFormat('es-ES', {
  useGrouping: 'auto'
}).format(1234);
// "1234"

new Intl.NumberFormat('es-ES', {
  useGrouping: 'auto'
}).format(12345);
// "12.345"

"auto" 값은 이러한 로케일 기본 설정을 존중하는 반면, "always"는 이를 무시합니다.

new Intl.NumberFormat('es-ES', {
  useGrouping: 'always'
}).format(1234);
// "1.234"

그룹 구분 기호를 비활성화할 시기 선택

숫자가 수량이 아닌 코드, 식별자 또는 기술적 값을 나타내는 컨텍스트에서는 그룹 구분 기호를 비활성화하세요.

일련번호와 제품 코드에는 그룹 구분 기호를 사용하지 않아야 합니다.

const serialNumber = 1234567890;

new Intl.NumberFormat('en-US', {
  useGrouping: false
}).format(serialNumber);
// "1234567890"

이는 구분 기호가 실제 값의 일부인지에 대한 혼란을 방지합니다. 사용자가 1,234,567,890를 보면 쉼표가 의미가 있는지, 다른 곳에 숫자를 입력할 때 쉼표를 입력해야 하는지 궁금해할 수 있습니다.

우편번호, 전화번호(일반 숫자로 형식화된 경우) 및 기타 고정 형식 식별자는 그룹화를 비활성화하면 도움이 됩니다.

const zipCode = 90210;

new Intl.NumberFormat('en-US', {
  useGrouping: false,
  minimumIntegerDigits: 5
}).format(zipCode);
// "90210"

디버깅 또는 로깅을 위해 원시 값을 표시하는 기술적 디스플레이는 일반적으로 정확한 숫자 표현을 표시하기 위해 그룹화를 비활성화해야 합니다.

console.log(`Processing ${
  new Intl.NumberFormat('en-US', {
    useGrouping: false
  }).format(bytesProcessed)
} bytes`);
// "Processing 1234567 bytes"

숫자 값에 대한 양식 입력은 사용자가 구분 기호를 입력해야 하는지에 대한 혼란을 피하기 위해 편집 중에 그룹화를 비활성화하는 경우가 많습니다. 형식화된 디스플레이는 사용자가 값 입력을 완료한 후 그룹화를 표시할 수 있습니다.

그룹 구분 기호를 활성화할 시기 선택

사용자가 빠르게 읽고 이해해야 하는 수량, 측정값 또는 금액을 나타내는 숫자에는 그룹 구분 기호를 활성화하세요.

금융 금액은 그룹 구분 기호를 사용하면 더 쉽게 스캔할 수 있습니다.

new Intl.NumberFormat('en-US', {
  style: 'currency',
  currency: 'USD',
  useGrouping: true
}).format(1234567.89);
// "$1,234,567.89"

구분 기호는 사용자가 $1,234,567와 $123,456를 한눈에 빠르게 구별할 수 있도록 도와줍니다.

통계 데이터, 분석 대시보드 및 개수를 표시하는 보고서는 그룹화의 이점을 얻습니다.

const pageViews = 5432198;

new Intl.NumberFormat('en-US', {
  useGrouping: true
}).format(pageViews);
// "5,432,198 views"

큰 측정값은 그룹화를 통해 가독성이 향상됩니다.

new Intl.NumberFormat('en-US', {
  style: 'unit',
  unit: 'kilometer',
  useGrouping: true
}).format(384400);
// "384,400 km"

이 거리(달까지의 대략적인 거리)는 384400보다 384,400로 표시할 때 더 읽기 쉽습니다.

사용자가 숫자의 크기를 이해해야 하는 모든 상황에서 그룹화 구분 기호가 도움이 됩니다. 구분 기호는 뇌가 숫자를 덩어리로 처리하는 데 도움이 되는 시각적 랜드마크를 생성합니다.

더 깔끔한 네 자리 숫자 표시를 위해 min2 사용

"min2" 값은 네 자리 또는 다섯 자리 숫자에 대해 더 깔끔한 외관을 제공합니다. 예를 들어, 연도 숫자는 일반적으로 구분 기호 없이 더 보기 좋습니다.

new Intl.NumberFormat('en-US', {
  useGrouping: 'min2'
}).format(2025);
// "2025"

new Intl.NumberFormat('en-US', {
  useGrouping: 'always'
}).format(2025);
// "2,025"

대부분의 독자는 연도를 나타낼 때 2,025보다 2025가 더 자연스럽다고 느낍니다. "min2" 설정은 이러한 동작을 자동으로 제공합니다.

특정 범위의 가격도 이 접근 방식의 이점을 얻습니다.

const price = 1299;

new Intl.NumberFormat('en-US', {
  style: 'currency',
  currency: 'USD',
  useGrouping: 'min2'
}).format(price);
// "$1299.00"

일부 소매업체는 심리적으로 덜 비싸게 느껴지도록 쉼표 없이 $1299와 같이 가격을 표시하는 것을 선호합니다. 가격이 네 자리를 초과하면 구분 기호가 나타납니다.

new Intl.NumberFormat('en-US', {
  style: 'currency',
  currency: 'USD',
  useGrouping: 'min2'
}).format(12999);
// "$12,999.00"

이를 통해 숫자의 크기를 수동으로 확인하지 않고도 가격 범위 전체에서 일관된 동작을 얻을 수 있습니다.

간결한 표기법이 그룹화에 미치는 영향 이해

컴팩트 표기법을 사용할 때, 기본 useGrouping 동작은 "auto"이 아닌 "min2"로 변경됩니다. 이는 컴팩트 형식에서 불필요한 구분 기호를 방지합니다.

new Intl.NumberFormat('en-US', {
  notation: 'compact'
}).format(1234);
// "1.2K"

new Intl.NumberFormat('en-US', {
  notation: 'compact',
  useGrouping: 'always'
}).format(1234);
// "1.2K"

간결한 표기법은 이미 숫자를 축약하므로 내부 그룹화 구분 기호는 중복됩니다. 포매터가 이를 자동으로 처리하지만 필요한 경우 재정의할 수 있습니다.

활성화된 그룹화 설정 확인

resolvedOptions() 메서드는 포매터가 실제로 사용하는 useGrouping 값을 보여줍니다.

const formatter = new Intl.NumberFormat('en-US', {
  style: 'currency',
  currency: 'USD'
});

formatter.resolvedOptions().useGrouping;
// "auto"

포매터가 useGrouping를 명시적으로 설정하지 않고 생성되었더라도, 해석된 옵션은 "auto"의 기본값을 표시합니다.

const compactFormatter = new Intl.NumberFormat('en-US', {
  notation: 'compact'
});

compactFormatter.resolvedOptions().useGrouping;
// "min2"

컴팩트 표기법 포매터는 해석된 옵션에 표시된 것처럼 "auto" 대신 "min2"를 기본값으로 사용합니다.

이 메서드는 포맷터가 실제로 사용하는 설정을 드러냄으로써 예상치 못한 그룹화 동작을 디버그하는 데 도움이 됩니다.