천 단위 구분 기호 표시 여부를 어떻게 제어하나요?

소개

숫자 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으로 읽는 것이 더 쉽습니다.

사용자가 숫자의 크기를 이해해야 하는 모든 상황에서는 그룹화 구분 기호가 유용합니다. 구분 기호는 뇌가 숫자를 덩어리로 처리하는 데 도움이 되는 시각적 이정표를 만듭니다.

4자리 숫자를 더 깔끔하게 표시하려면 min2 사용

'min2' 값은 4자리나 5자리 숫자를 더 깔끔하게 표시합니다. 예를 들어, 연도는 일반적으로 구분 기호 없이 표시하는 것이 더 보기 좋습니다.

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'와 같이 쉼표 없이 가격을 표시하는 것을 선호합니다. 가격이 4자리를 초과하면 구분 기호가 나타납니다.

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'를 기본값으로 사용하며, 이는 해결된 옵션에서 확인할 수 있습니다.

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