Intl.NumberFormat API
JavaScript의 내장 국제화 API로 모든 로케일에 맞게 숫자 형식 지정
소개
애플리케이션에서 1234567.89 숫자를 표시하는 경우를 생각해 보세요. toString()를 사용하면 "1234567.89"가 생성되는데, 이는 읽기 어렵고 모든 사람이 소수점에 마침표를 사용하며 숫자를 왼쪽에서 오른쪽으로 읽는다고 가정합니다. 미국 사용자는 "1,234,567.89"를, 독일 사용자는 "1.234.567,89"를, 인도 사용자는 다른 그룹화 규칙을 적용한 "12,34,567.89"를 기대합니다.
Intl.NumberFormat API는 로케일별 규칙에 따라 숫자를 포맷하여 이 문제를 해결합니다. 천 단위 구분 기호, 소수점, 숫자 그룹화, 통화 기호, 백분율 기호, 측정 단위 및 숫자 체계를 처리합니다. 이를 통해 수동 문자열 조작이나 서드파티 라이브러리가 필요하지 않습니다.
이 가이드에서는 Intl.NumberFormat를 사용하여 전 세계 사용자를 위해 숫자를 올바르게 포맷하는 방법을 설명합니다. 기본 사용법부터 시작하여 통화 포맷, 간결한 표기법, 사용자 정의 반올림 모드와 같은 고급 기능까지 다룹니다.
기본 설정으로 숫자 형식 지정
로케일 문자열과 함께 new Intl.NumberFormat()를 호출하여 포매터를 생성한 다음, 숫자와 함께 format() 메서드를 호출합니다.
const formatter = new Intl.NumberFormat('en-US');
formatter.format(1234567.89);
// "1,234,567.89"
포맷터는 천 단위 구분 기호를 추가하고 로케일에 따라 소수점을 형식화합니다. 로케일을 지정하지 않으면 포맷터는 일반적으로 사용자의 시스템 설정을 기반으로 하는 런타임의 기본 로케일을 사용합니다.
const formatter = new Intl.NumberFormat('de-DE');
formatter.format(1234567.89);
// "1.234.567,89"
독일 규칙은 천 단위 구분 기호에 마침표를 사용하고 소수점에 쉼표를 사용하는데, 이는 미국 규칙과 반대입니다. 포맷터는 이러한 차이를 자동으로 처리합니다.
로케일 코드 이해
로케일 코드는 언어와 선택적으로 지역을 식별하며, language-REGION로 작성됩니다. 언어는 en 또는 es과 같은 두 글자 ISO 639-1 코드를 사용합니다. 지역은 US 또는 MX와 같은 두 글자 ISO 3166-1 코드를 사용합니다.
new Intl.NumberFormat('en-US').format(1234.56);
// "1,234.56" (American English)
new Intl.NumberFormat('en-GB').format(1234.56);
// "1,234.56" (British English)
new Intl.NumberFormat('es-ES').format(1234.56);
// "1234,56" (European Spanish)
new Intl.NumberFormat('es-MX').format(1234.56);
// "1,234.56" (Mexican Spanish)
두 영어 변형은 동일한 형식을 사용하지만 스페인어 변형은 다릅니다. 유럽 스페인어는 네 자리 숫자에 천 단위 구분 기호를 생략하고 소수점에 쉼표를 사용하는 반면, 멕시코 스페인어는 미국 규칙을 따릅니다.
사용자의 위치 또는 언어 기본 설정에 따라 로케일을 선택하세요. 애플리케이션은 일반적으로 사용자 설정, 브라우저 언어 또는 IP 지오로케이션에서 로케일을 결정합니다.
형식 스타일 선택
style 옵션은 포맷 카테고리를 결정합니다. 생성자의 두 번째 인수로 옵션 객체를 전달합니다.
new Intl.NumberFormat('en-US', {
style: 'decimal'
}).format(1234.56);
// "1,234.56"
decimal 스타일이 기본값입니다. 다른 스타일로는 currency, percent, unit가 있습니다.
기호 및 코드로 통화 형식 지정
currency 스타일은 ISO 4217 통화 코드가 포함된 currency 옵션이 필요합니다.
new Intl.NumberFormat('en-US', {
style: 'currency',
currency: 'USD'
}).format(1234.56);
// "$1,234.56"
포매터는 달러 기호를 추가하고 기본적으로 소수점 이하 두 자리로 형식을 지정하며, 이는 대부분의 통화에 대한 표준입니다. 로케일에 따라 기호 위치가 다릅니다.
new Intl.NumberFormat('de-DE', {
style: 'currency',
currency: 'EUR'
}).format(1234.56);
// "1.234,56 €"
독일어 형식은 유로 기호를 금액 뒤에 공백과 함께 배치합니다. currency 옵션은 표시할 통화를 결정하며, 따를 로케일의 규칙을 결정하지 않습니다. 로케일은 형식 규칙을 결정하고, 통화는 기호를 결정합니다.
new Intl.NumberFormat('en-US', {
style: 'currency',
currency: 'EUR'
}).format(1234.56);
// "€1,234.56"
유로 기호를 사용한 미국 형식 규칙은 유럽 배치 규칙이 아닌 미국 규칙에 따라 금액 앞에 유로 기호를 생성합니다.
통화 표시 형식 제어
currencyDisplay 옵션은 형식화된 문자열에서 통화가 표시되는 방식을 변경합니다.
const amount = 1234.56;
new Intl.NumberFormat('en-US', {
style: 'currency',
currency: 'USD',
currencyDisplay: 'symbol'
}).format(amount);
// "$1,234.56"
new Intl.NumberFormat('en-US', {
style: 'currency',
currency: 'USD',
currencyDisplay: 'code'
}).format(amount);
// "USD 1,234.56"
new Intl.NumberFormat('en-US', {
style: 'currency',
currency: 'USD',
currencyDisplay: 'name'
}).format(amount);
// "1,234.56 US dollars"
new Intl.NumberFormat('en-US', {
style: 'currency',
currency: 'USD',
currencyDisplay: 'narrowSymbol'
}).format(amount);
// "$1,234.56"
symbol 옵션은 기본값이며 $ 또는 €와 같은 통화 기호를 표시합니다. code 옵션은 세 글자 통화 코드를 표시합니다. name 옵션은 통화 이름을 전체로 표기합니다. narrowSymbol 옵션은 로케일의 축약된 통화 기호를 사용하며, 이는 모호할 수 있지만 공간을 절약합니다.
symbol와 narrowSymbol의 차이는 기호를 공유하는 통화에서 명확해집니다.
new Intl.NumberFormat('en-US', {
style: 'currency',
currency: 'CAD',
currencyDisplay: 'symbol'
}).format(100);
// "CA$100.00"
new Intl.NumberFormat('en-US', {
style: 'currency',
currency: 'CAD',
currencyDisplay: 'narrowSymbol'
}).format(100);
// "$100.00"
캐나다 달러는 미국 달러와 구별하기 위해 symbol 옵션에서 CA$로 표시되지만, narrowSymbol에서는 $로만 표시됩니다.
회계 표기법으로 음수 통화 금액 형식 지정
currencySign 옵션은 음수 금액이 표시되는 방식을 제어합니다.
new Intl.NumberFormat('en-US', {
style: 'currency',
currency: 'USD',
currencySign: 'standard'
}).format(-1234.56);
// "-$1,234.56"
new Intl.NumberFormat('en-US', {
style: 'currency',
currency: 'USD',
currencySign: 'accounting'
}).format(-1234.56);
// "($1,234.56)"
standard 옵션은 기본값이며 마이너스 기호를 사용합니다. accounting 옵션은 회계 규칙에 따라 음수 금액을 괄호로 묶습니다. 이는 재무 보고서에서 음수를 시각적으로 더 명확하게 구분합니다.
백분율 형식 지정
percent 스타일은 숫자에 100을 곱하고 퍼센트 기호를 추가합니다.
new Intl.NumberFormat('en-US', {
style: 'percent'
}).format(0.1234);
// "12%"
new Intl.NumberFormat('en-US', {
style: 'percent'
}).format(0.1256);
// "13%"
포맷터는 기본적으로 가장 가까운 정수로 반올림합니다. 자릿수 옵션으로 소수 자릿수를 제어할 수 있습니다.
new Intl.NumberFormat('en-US', {
style: 'percent',
minimumFractionDigits: 2
}).format(0.1234);
// "12.34%"
곱한 형태가 아닌 백분율의 소수 형태를 전달하세요. 포맷터가 곱셈을 처리합니다.
단위가 있는 측정값 형식 지정
unit 스타일은 단위 식별자가 포함된 unit 옵션이 필요합니다.
new Intl.NumberFormat('en-US', {
style: 'unit',
unit: 'kilometer-per-hour'
}).format(100);
// "100 km/h"
new Intl.NumberFormat('en-GB', {
style: 'unit',
unit: 'mile-per-hour'
}).format(100);
// "100 mph"
사용 가능한 단위에는 길이 측정(meter, kilometer, mile), 시간 지속(second, minute, hour), 디지털 저장 용량(byte, kilobyte, megabyte), 온도(celsius, fahrenheit) 등이 포함됩니다. kilometer-per-hour와 같은 복합 단위는 하이픈으로 단순 단위를 결합합니다.
unitDisplay 옵션은 단위 형식을 제어합니다.
const distance = 1234.5;
new Intl.NumberFormat('en-US', {
style: 'unit',
unit: 'kilometer',
unitDisplay: 'long'
}).format(distance);
// "1,234.5 kilometers"
new Intl.NumberFormat('en-US', {
style: 'unit',
unit: 'kilometer',
unitDisplay: 'short'
}).format(distance);
// "1,234.5 km"
new Intl.NumberFormat('en-US', {
style: 'unit',
unit: 'kilometer',
unitDisplay: 'narrow'
}).format(distance);
// "1,234.5km"
long 옵션은 단위 이름을 전체로 표기합니다. short 옵션은 약어를 사용합니다. narrow 옵션은 가장 간결한 형식을 사용하며, 이는 모호할 수 있습니다.
간결한 표기법으로 큰 숫자 표시
notation 옵션은 숫자 표현 방식을 변경합니다. compact 값은 큰 숫자에 대해 로케일별 축약 형식을 사용합니다.
new Intl.NumberFormat('en-US', {
notation: 'compact'
}).format(1234567);
// "1.2M"
new Intl.NumberFormat('en-US', {
notation: 'compact'
}).format(987654321);
// "988M"
간결한 표기법은 기본적으로 소수점 첫째 자리까지 반올림하고 천 단위에는 K, 백만 단위에는 M, 십억 단위에는 B와 같은 접미사를 추가합니다. 이 형식은 소셜 미디어 팔로워 수, 동영상 조회수, 분석 대시보드에 표시됩니다.
compactDisplay 옵션은 접미사 길이를 제어합니다.
new Intl.NumberFormat('en-US', {
notation: 'compact',
compactDisplay: 'short'
}).format(1234567);
// "1.2M"
new Intl.NumberFormat('en-US', {
notation: 'compact',
compactDisplay: 'long'
}).format(1234567);
// "1.2 million"
short 옵션은 기본값이며 기호를 사용합니다. long 옵션은 크기 단어를 전체로 표기합니다. 로케일마다 다른 접미사를 사용합니다.
new Intl.NumberFormat('zh-CN', {
notation: 'compact'
}).format(123456789);
// "1.2亿"
중국어는 억 단위에 亿를 사용하며, 이는 해당 언어의 숫자 그룹화 체계를 반영합니다.
매우 크거나 작은 숫자를 과학적 표기법으로 표현
scientific 표기법은 숫자를 10의 거듭제곱을 곱한 계수로 표현합니다.
new Intl.NumberFormat('en-US', {
notation: 'scientific'
}).format(123456789);
// "1.235E8"
new Intl.NumberFormat('en-US', {
notation: 'scientific'
}).format(0.00000123);
// "1.23E-6"
이 형식은 매우 큰 숫자(천문학적 거리, 분자 수)와 매우 작은 숫자(입자 질량, 나노 스케일 측정)에 적합합니다. 지수는 항상 1의 배수로 표시됩니다.
기술 애플리케이션에 공학 표기법 사용
engineering 표기법은 과학적 표기법과 유사하지만 지수를 3의 배수로 제한합니다.
new Intl.NumberFormat('en-US', {
notation: 'engineering'
}).format(123456789);
// "123.457E6"
new Intl.NumberFormat('en-US', {
notation: 'engineering'
}).format(1234);
// "1.234E3"
공학 표기법은 SI 단위 접두사(킬로, 메가, 기가)와 일치하여 공학 및 물리학 분야에서 표준으로 사용됩니다. 계수는 1에서 999 사이입니다.
소수 자릿수로 소수점 이하 자릿수 제어
minimumFractionDigits 및 maximumFractionDigits 옵션은 소수점 뒤에 표시되는 자릿수를 제어합니다.
new Intl.NumberFormat('en-US', {
minimumFractionDigits: 2,
maximumFractionDigits: 2
}).format(1234.5);
// "1,234.50"
new Intl.NumberFormat('en-US', {
minimumFractionDigits: 2,
maximumFractionDigits: 2
}).format(1234.567);
// "1,234.57"
최소값은 필요할 때 후행 0이 표시되도록 합니다. 최대값은 더 긴 소수를 반올림합니다. 통화 포맷터는 기본적으로 소수점 이하 두 자리입니다. 십진수 포맷터는 기본적으로 최소 0, 최대 3입니다.
new Intl.NumberFormat('en-US', {
minimumFractionDigits: 0,
maximumFractionDigits: 0
}).format(1234.567);
// "1,235"
둘 다 0으로 설정하면 가장 가까운 정수로 반올림됩니다.
유효 숫자로 전체 정밀도 제어
minimumSignificantDigits 및 maximumSignificantDigits 옵션은 소수점 위치와 관계없이 전체 정밀도를 제어합니다.
new Intl.NumberFormat('en-US', {
minimumSignificantDigits: 3,
maximumSignificantDigits: 3
}).format(1234.567);
// "1,230"
new Intl.NumberFormat('en-US', {
minimumSignificantDigits: 3,
maximumSignificantDigits: 3
}).format(0.001234);
// "0.00123"
유효 숫자는 선행 0을 제외한 모든 자릿수를 계산합니다. 첫 번째 예제는 세 자리로 반올림하여 1230을 생성합니다. 두 번째 예제는 선행 0 뒤에 세 자리를 유지하여 0.00123을 생성합니다.
유효 자릿수 옵션은 두 옵션이 모두 지정된 경우 소수 자릿수 옵션보다 우선합니다.
반올림 모드로 반올림 전략 선택하기
roundingMode 옵션은 절사가 필요할 때 숫자를 반올림하는 방법을 결정합니다.
const value = 1.5;
new Intl.NumberFormat('en-US', {
maximumFractionDigits: 0,
roundingMode: 'halfExpand'
}).format(value);
// "2"
new Intl.NumberFormat('en-US', {
maximumFractionDigits: 0,
roundingMode: 'halfTrunc'
}).format(value);
// "1"
halfExpand 모드는 기본값이며 0.5를 0에서 멀어지는 방향으로 반올림하는 학교에서 가르치는 일반적인 반올림 전략입니다. halfTrunc 모드는 0.5를 0 쪽으로 반올림합니다.
기타 모드는 다음과 같습니다:
ceil: 항상 양의 무한대 방향으로 반올림floor: 항상 음의 무한대 방향으로 반올림expand: 항상 0에서 멀어지는 방향으로 반올림trunc: 항상 0 쪽으로 반올림halfCeil: 0.5를 양의 무한대 방향으로 반올림halfFloor: 0.5를 음의 무한대 방향으로 반올림halfEven: 0.5를 가장 가까운 짝수로 반올림
const prices = [1.5, 2.5, 3.5];
prices.map(price =>
new Intl.NumberFormat('en-US', {
maximumFractionDigits: 0,
roundingMode: 'halfEven'
}).format(price)
);
// ["2", "2", "4"]
halfEven 모드는 은행가 반올림이라고도 하며, 반복 계산에서 반올림 편향을 줄입니다. 0.5를 반올림할 때 가장 가까운 짝수를 선택합니다. 이는 1.5 및 2.5 모두에 대해 2을 생성하지만, 3.5에 대해서는 4을 생성합니다.
금융 애플리케이션은 요금을 올림할 때 ceil를 사용하고 환불을 내림할 때 floor를 사용합니다. 통계 애플리케이션은 누적 반올림 오차를 최소화하기 위해 halfEven를 사용합니다.
그룹화 옵션으로 천 단위 구분 기호 제어하기
useGrouping 옵션은 천 단위 구분 기호의 표시 여부를 제어합니다.
new Intl.NumberFormat('en-US', {
useGrouping: true
}).format(123456);
// "123,456"
new Intl.NumberFormat('en-US', {
useGrouping: false
}).format(123456);
// "123456"
true 값이 기본값입니다. false 값은 모든 구분 기호를 제거합니다. 문자열 값은 더 세밀한 제어를 제공합니다.
new Intl.NumberFormat('en-US', {
useGrouping: 'always'
}).format(1234);
// "1,234"
new Intl.NumberFormat('en-US', {
useGrouping: 'min2'
}).format(1234);
// "1234"
always 값은 모든 경우에 구분 기호를 사용합니다. min2 값은 네 자리 숫자에 대해 구분 기호를 생략합니다. auto 값은 로케일 기본 설정을 따르며, 일반적으로 min2 동작과 일치합니다.
압축 표기법은 압축된 숫자에 내부 구분 기호가 거의 필요하지 않기 때문에 기본적으로 min2를 사용합니다.
부호 표시 옵션으로 부호를 명시적으로 표시하기
signDisplay 옵션은 양수 및 음수 기호가 표시되는 시점을 제어합니다.
new Intl.NumberFormat('en-US', {
signDisplay: 'auto'
}).format(100);
// "100"
new Intl.NumberFormat('en-US', {
signDisplay: 'always'
}).format(100);
// "+100"
auto 값이 기본값이며 음수에는 마이너스 기호를 표시하지만 양수에는 플러스 기호를 표시하지 않습니다. always 값은 둘 다 표시합니다.
new Intl.NumberFormat('en-US', {
signDisplay: 'exceptZero'
}).format(0);
// "0"
new Intl.NumberFormat('en-US', {
signDisplay: 'always'
}).format(0);
// "+0"
exceptZero 값은 always 동작에서도 0 값에 대한 기호를 생략합니다. 이는 +0와 -0 표시가 혼동되는 것을 방지합니다.
new Intl.NumberFormat('en-US', {
signDisplay: 'never'
}).format(-100);
// "100"
never 값은 기호를 완전히 제거하여 절댓값만 표시합니다.
금융 애플리케이션은 always를 사용하여 플러스 기호로 이익을 강조합니다. 온도 표시는 exceptZero를 사용하여 +0° 또는 -0° 표시를 방지합니다.
형식화된 출력을 부분으로 분할
formatToParts() 메서드는 형식화된 문자열의 각 구성 요소를 나타내는 객체 배열을 반환합니다.
new Intl.NumberFormat('en-US', {
style: 'currency',
currency: 'USD'
}).formatToParts(1234.56);
다음을 반환합니다:
[
{ type: 'currency', value: '$' },
{ type: 'integer', value: '1' },
{ type: 'group', value: ',' },
{ type: 'integer', value: '234' },
{ type: 'decimal', value: '.' },
{ type: 'fraction', value: '56' }
]
각 객체는 컴포넌트를 식별하는 type와 문자열을 포함하는 value를 가집니다. type는 currency, integer, group, decimal, fraction, literal, minusSign, plusSign, percentSign 또는 기타 값이 될 수 있습니다.
이를 통해 개별 구성 요소에 사용자 정의 스타일을 적용할 수 있습니다.
const parts = new Intl.NumberFormat('en-US', {
style: 'currency',
currency: 'USD'
}).formatToParts(1234.56);
const formatted = parts.map(part => {
if (part.type === 'currency') {
return `<span class="currency">${part.value}</span>`;
}
if (part.type === 'integer') {
return `<span class="integer">${part.value}</span>`;
}
return part.value;
}).join('');
// <span class="currency">$</span><span class="integer">1</span>,<span class="integer">234</span>.56
이는 스타일이 적용된 구성 요소가 포함된 HTML을 생성합니다. 동일한 접근 방식이 음수 금액에 다른 색상을 적용하거나, 통화 기호를 확대하거나, 개별 숫자에 애니메이션을 적용하는 데 사용됩니다.
숫자 범위 형식화
formatRange() 메서드는 두 숫자를 범위로 포맷합니다.
new Intl.NumberFormat('en-US', {
style: 'currency',
currency: 'USD'
}).formatRange(100, 200);
// "$100.00 – $200.00"
포매터는 로케일별 범위 구분 기호(영어의 경우 en 대시)를 사용하고 두 통화 기호를 모두 포함합니다. 값이 동일한 문자열로 형식화되면 포매터는 물결표가 있는 단일 값을 반환합니다.
new Intl.NumberFormat('en-US', {
notation: 'compact'
}).formatRange(1200, 1800);
// "~1K"
1200와 1800 모두 간략 표기법에서 1K로 포맷되므로, 포매터는 약 1K를 표시합니다.
formatRangeToParts() 메서드는 범위에 대한 부분들을 반환합니다.
new Intl.NumberFormat('en-US', {
style: 'currency',
currency: 'USD'
}).formatRangeToParts(100, 200);
다음을 반환합니다:
[
{ type: 'currency', value: '$', source: 'startRange' },
{ type: 'integer', value: '100', source: 'startRange' },
{ type: 'decimal', value: '.', source: 'startRange' },
{ type: 'fraction', value: '00', source: 'startRange' },
{ type: 'literal', value: ' – ', source: 'shared' },
{ type: 'currency', value: '$', source: 'endRange' },
{ type: 'integer', value: '200', source: 'endRange' },
{ type: 'decimal', value: '.', source: 'endRange' },
{ type: 'fraction', value: '00', source: 'endRange' }
]
source 속성은 해당 부분이 시작 값, 종료 값 또는 범위 구분자에서 나온 것인지 식별합니다.
가격 범위, 날짜 범위 및 측정 범위는 적절한 로케일 기반 형식 지정을 위해 이 메서드를 사용합니다.
해석된 옵션 검사
resolvedOptions() 메서드는 포매터가 사용하는 실제 옵션을 보여주는 객체를 반환합니다.
const formatter = new Intl.NumberFormat('en-US', {
style: 'currency',
currency: 'USD'
});
formatter.resolvedOptions();
다음을 반환합니다:
{
locale: 'en-US',
numberingSystem: 'latn',
style: 'currency',
currency: 'USD',
currencyDisplay: 'symbol',
currencySign: 'standard',
minimumIntegerDigits: 1,
minimumFractionDigits: 2,
maximumFractionDigits: 2,
useGrouping: 'auto',
notation: 'standard',
signDisplay: 'auto',
roundingMode: 'halfExpand'
}
객체에는 명시적으로 설정된 옵션과 기본값이 포함됩니다. 시스템이 다르지만 호환 가능한 로케일로 해석한 경우 locale는 요청된 로케일과 다를 수 있습니다. numberingSystem는 포매터가 사용하는 숫자 문자를 보여줍니다.
이 메서드는 모든 활성 설정을 표시하여 예상치 못한 형식 지정을 디버그하는 데 도움이 됩니다.
더 나은 성능을 위해 포매터 재사용
NumberFormat 인스턴스를 생성하는 것은 로케일 데이터 로딩과 옵션 처리를 포함합니다. 동일한 설정으로 여러 값을 포맷할 때는 인스턴스를 재사용하세요.
// Inefficient: creates new formatter for each value
prices.map(price =>
new Intl.NumberFormat('en-US', {
style: 'currency',
currency: 'USD'
}).format(price)
);
// Efficient: creates formatter once
const formatter = new Intl.NumberFormat('en-US', {
style: 'currency',
currency: 'USD'
});
prices.map(price => formatter.format(price));
두 번째 접근 방식은 많은 값을 형식 지정할 때 훨씬 빠릅니다. 루프 및 컴포넌트 렌더 함수 외부에서 포매터를 생성하세요.
최신 JavaScript 엔진은 내부적으로 NumberFormat 인스턴스를 캐시하지만, 명시적인 재사용은 더 나은 성능과 명확한 코드를 제공합니다.
브라우저 지원 확인
Intl.NumberFormat API는 모든 최신 브라우저에서 지원됩니다. Chrome, Firefox, Safari, Edge는 2016년부터 기본 API를 지원해 왔습니다. formatRange(), formatRangeToParts(), 확장된 roundingMode 옵션과 같은 고급 기능은 최근에 지원되었지만 현재 브라우저 버전에서는 사용 가능합니다.
다음을 사용하여 지원을 확인하세요:
if (typeof Intl !== 'undefined' && Intl.NumberFormat) {
// NumberFormat is supported
const formatter = new Intl.NumberFormat('en-US');
}
특정 기능에 대한 지원을 확인하세요:
const formatter = new Intl.NumberFormat('en-US');
if (typeof formatter.formatRange === 'function') {
// formatRange is supported
}
구형 브라우저 지원이 필요한 애플리케이션은 @formatjs/intl-numberformat와 같은 폴리필을 사용할 수 있지만, 대부분의 최신 애플리케이션은 폴백 없이 네이티브 API를 사용할 수 있습니다.
NumberFormat을 사용해야 하는 경우
다음의 경우 Intl.NumberFormat를 사용하세요:
- 모든 UI 컨텍스트에서 사용자에게 숫자 표시
- 전자상거래 애플리케이션에서 통화 금액 형식 지정
- 분석 대시보드에서 백분율 표시
- 팔로워 수, 조회수 및 기타 소셜 지표 표시
- 측정값 및 과학적 값 형식 지정
- 여러 로케일을 지원하는 국제화된 애플리케이션 구축
다음의 경우 Intl.NumberFormat를 사용하지 마세요:
- 내부 계산 또는 데이터 처리
- 데이터베이스에 값 저장
- API용 데이터 직렬화
- 사용자 입력을 숫자로 다시 파싱
NumberFormat는 프레젠테이션 레이어 도구입니다. 계산 및 저장에는 원시 숫자 값을 유지하고, 사용자에게 값을 표시할 때만 포맷팅을 적용하세요.