통화를 기호, 코드 또는 이름으로 표시하는 방법
currencyDisplay 옵션을 사용하여 통화가 $, USD 또는 US dollars로 표시되는지 제어
소개
가격이나 금액을 표시할 때, 통화를 어떻게 표현할지 결정해야 합니다. 제품 가격은 $25, USD 25 또는 25 US dollars와 같이 표시될 수 있습니다. 각 형식은 서로 다른 목적을 가지며 다양한 상황에서 더 효과적으로 작동합니다.
기호 형식은 사용자가 어떤 통화를 예상할지 알고 있는 일상적인 쇼핑 인터페이스에 적합합니다. 코드 형식은 여러 통화가 등장하는 국제 비즈니스 문서에서 모호함을 제거합니다. 이름 형식은 접근성 도구와 교육 콘텐츠에서 최대한의 명확성을 제공합니다.
JavaScript는 Intl.NumberFormat에서 currencyDisplay 옵션을 제공하여 통화가 어떻게 표시되는지 제어합니다. 이 강의에서는 사용 가능한 네 가지 형식, 지역에 따른 차이점, 그리고 특정 사용 사례에 맞는 형식을 선택하는 방법을 설명합니다.
currencyDisplay 옵션 이해하기
currencyDisplay 옵션은 금액을 형식화할 때 통화 단위가 어떻게 표시되는지 제어합니다. 이 옵션은 숫자 값을 변경하지 않고 통화가 표현되는 방식만 변경합니다.
네 가지 값을 사용할 수 있습니다:
symbol은 $ 또는 €와 같은 지역화된 통화 기호를 표시합니다narrowSymbol은 US$ 대신 $와 같은 간결한 기호를 표시합니다code는 USD 또는 EUR과 같은 ISO 통화 코드를 표시합니다name은 US dollars 또는 euros와 같은 전체 통화 이름을 표시합니다
각 형식은 동일한 금액에 대해 서로 다른 시각적 표현을 만듭니다. 선택은 사용자 인터페이스 요구 사항, 사용 가능한 공간 및 사용자 기대에 따라 달라집니다.
일상적인 표시에 symbol 형식 사용하기
symbol 형식은 기본 currencyDisplay 값입니다. 이 형식은 특정 지역의 사용자가 보기를 기대하는 지역화된 통화 기호를 보여줍니다.
const formatter = new Intl.NumberFormat('en-US', {
style: 'currency',
currency: 'USD',
currencyDisplay: 'symbol'
});
console.log(formatter.format(25));
// 출력: "$25.00"
이 형식은 사용자에게 가장 친숙한 표현을 제공합니다. 미국인들은 달러 기호를, 유럽인들은 유로 기호를, 영국 사용자들은 파운드 기호를 보기를 기대합니다.
기호는 지역과 통화에 따라 조정됩니다. 독일 지역에 대해 미국 달러를 형식화할 때, 포맷터는 국가 지정을 포함하는 지역화된 기호를 사용합니다.
const usFormatter = new Intl.NumberFormat('en-US', {
style: 'currency',
currency: 'USD',
currencyDisplay: 'symbol'
});
console.log(usFormatter.format(25));
// 출력: "$25.00"
const deFormatter = new Intl.NumberFormat('de-DE', {
style: 'currency',
currency: 'USD',
currencyDisplay: 'symbol'
});
console.log(deFormatter.format(25));
// 출력: "25,00 $"
독일 포맷터가 달러 기호를 금액 뒤에 배치하고 소수점 구분자로 쉼표를 사용하는 것을 주목하세요. 이러한 지역별 규칙은 자동으로 적용됩니다.
다양한 지역에 대해 유로를 형식화할 때, 유로 기호는 나타나지만 형식 규칙은 변경됩니다.
const usFormatter = new Intl.NumberFormat('en-US', {
style: 'currency',
currency: 'EUR',
currencyDisplay: 'symbol'
});
console.log(usFormatter.format(25));
// 출력: "€25.00"
const deFormatter = new Intl.NumberFormat('de-DE', {
style: 'currency',
currency: 'EUR',
currencyDisplay: 'symbol'
});
console.log(deFormatter.format(25));
// 출력: "25,00 €"
기호 형식은 사용자가 단일 통화 컨텍스트 내에서 작업할 때 효과적입니다. USD로 가격을 표시하는 미국 전자상거래 사이트는 안전하게 달러 기호를 사용할 수 있습니다. EUR로 가격을 표시하는 유럽 사이트는 유로 기호를 사용할 수 있습니다.
그러나 여러 통화가 유사한 기호를 공유할 때 기호 형식은 모호함을 만들 수 있습니다. 캐나다 달러, 호주 달러, 미국 달러는 모두 달러 기호를 사용합니다. 이러한 경우, 일부 지역에서는 구분을 위해 국가 접두사를 추가합니다.
const usFormatter = new Intl.NumberFormat('en-US', {
style: 'currency',
currency: 'CAD',
currencyDisplay: 'symbol'
});
console.log(usFormatter.format(25));
// 출력: "CA$25.00"
포맷터는 미국 지역에서 형식화할 때 캐나다 달러와 미국 달러를 구분하기 위해 CA$를 추가합니다.
좁은 공간 표시를 위한 narrowSymbol 형식 사용
narrowSymbol 형식은 국가 접두사 없이 통화 기호를 표시합니다. 이는 공간이 제한된 인터페이스에서 효과적으로 작동하는 더 간결한 표현을 만듭니다.
const symbolFormatter = new Intl.NumberFormat('en-US', {
style: 'currency',
currency: 'USD',
currencyDisplay: 'symbol'
});
console.log(symbolFormatter.format(25));
// Output: "$25.00"
const narrowFormatter = new Intl.NumberFormat('en-US', {
style: 'currency',
currency: 'USD',
currencyDisplay: 'narrowSymbol'
});
console.log(narrowFormatter.format(25));
// Output: "$25.00"
미국 로케일에서 미국 달러의 경우, 국가 접두사가 필요하지 않기 때문에 두 형식 모두 동일한 출력을 생성합니다. 차이점은 국가 지정을 포함할 수 있는 통화를 포맷팅할 때 분명해집니다.
const symbolFormatter = new Intl.NumberFormat('en-US', {
style: 'currency',
currency: 'CAD',
currencyDisplay: 'symbol'
});
console.log(symbolFormatter.format(25));
// Output: "CA$25.00"
const narrowFormatter = new Intl.NumberFormat('en-US', {
style: 'currency',
currency: 'CAD',
currencyDisplay: 'narrowSymbol'
});
console.log(narrowFormatter.format(25));
// Output: "$25.00"
좁은 기호 형식은 CA 접두사를 제거하고 달러 기호만 표시합니다. 이는 공간을 절약하지만 캐나다 달러와 미국 달러 간의 구분이 사라집니다.
공간이 제한되어 있고 통화 컨텍스트가 인터페이스의 다른 부분에서 명확할 때 narrowSymbol을 사용하세요. 모바일 앱, 간결한 대시보드 및 데이터 테이블은 더 짧은 형식의 이점을 얻습니다. 그러나 사용자가 통화 선택기나 헤더 레이블과 같은 다른 수단을 통해 어떤 통화를 보고 있는지 확인할 수 있도록 해야 합니다.
좁은 형식은 다른 로케일에서 다른 통화에도 영향을 미칩니다.
const narrowFormatter = new Intl.NumberFormat('de-DE', {
style: 'currency',
currency: 'EUR',
currencyDisplay: 'narrowSymbol'
});
console.log(narrowFormatter.format(25));
// Output: "25,00 €"
각 로케일은 현지 관례에 따라 자체적인 좁은 기호 형식을 정의합니다.
명확한 표시를 위한 코드 형식 사용
'코드' 형식은 기호 대신 ISO 4217 통화 코드를 표시합니다. 이 세 글자 코드는 각 통화를 모호함 없이 고유하게 식별합니다.
const formatter = new Intl.NumberFormat('en-US', {
style: 'currency',
currency: 'USD',
currencyDisplay: 'code'
});
console.log(formatter.format(25));
// 출력: "USD 25.00"
코드는 기호 대신 표시되어 금액이 어떤 통화를 나타내는지 즉시 명확하게 합니다. 이 형식은 모든 로케일에서 일관된 약어로 작동합니다.
const usFormatter = new Intl.NumberFormat('en-US', {
style: 'currency',
currency: 'EUR',
currencyDisplay: 'code'
});
console.log(usFormatter.format(25));
// 출력: "EUR 25.00"
const deFormatter = new Intl.NumberFormat('de-DE', {
style: 'currency',
currency: 'EUR',
currencyDisplay: 'code'
});
console.log(deFormatter.format(25));
// 출력: "25,00 EUR"
EUR 코드는 두 형식 모두에 나타나지만, 위치와 숫자 형식은 로케일 규칙을 따릅니다. 보편적인 통화 코드와 로케일별 숫자 형식의 이러한 조합은 국제적 맥락에서 코드 형식을 가치 있게 만듭니다.
코드 형식은 기호를 공유하는 통화 간의 혼란을 제거합니다.
const usdFormatter = new Intl.NumberFormat('en-US', {
style: 'currency',
currency: 'USD',
currencyDisplay: 'code'
});
console.log(usdFormatter.format(25));
// 출력: "USD 25.00"
const cadFormatter = new Intl.NumberFormat('en-US', {
style: 'currency',
currency: 'CAD',
currencyDisplay: 'code'
});
console.log(cadFormatter.format(25));
// 출력: "CAD 25.00"
const audFormatter = new Intl.NumberFormat('en-US', {
style: 'currency',
currency: 'AUD',
currencyDisplay: 'code'
});
console.log(audFormatter.format(25));
// 출력: "AUD 25.00"
각 달러 변형은 고유한 코드를 받습니다. 사용자는 미국 달러, 캐나다 달러, 호주 달러를 즉시 구별할 수 있습니다.
재무 보고서, 국제 인보이스, 회계 시스템 및 통화 명확성이 중요한 모든 상황에서 코드 형식을 사용하세요. 이 형식은 기호가 인코딩 문제를 일으킬 수 있는 API 및 데이터 내보내기에서도 잘 작동합니다.
단점은 친숙도가 낮다는 것입니다. 대부분의 소비자는 $를 인식하지만 CAD가 무엇을 나타내는지 즉시 알지 못할 수 있습니다. 청중이 이해하거나 정확성이 친숙함보다 중요할 때 코드를 사용하세요.
최대 명확성을 위한 이름 형식 사용
'name' 형식은 로케일 언어로 통화의 전체 이름을 표시합니다. 이는 금액이 어떤 통화를 나타내는지에 대한 완전한 명확성을 제공합니다.
const formatter = new Intl.NumberFormat('en-US', {
style: 'currency',
currency: 'USD',
currencyDisplay: 'name'
});
console.log(formatter.format(25));
// 출력: "25.00 US dollars"
통화 이름이 철자 그대로 표시되어 금액이 무엇을 나타내는지에 대한 모호함이 없습니다. 이 형식은 접근성에 특히 가치가 있습니다. 스크린 리더는 통화 이름을 명확하게 발음할 수 있지만, 기호는 일관되지 않게 발표될 수 있습니다.
이름은 로케일에 맞게 조정되어 적절한 언어로 표시됩니다.
const enFormatter = new Intl.NumberFormat('en-US', {
style: 'currency',
currency: 'EUR',
currencyDisplay: 'name'
});
console.log(enFormatter.format(25));
// 출력: "25.00 euros"
const deFormatter = new Intl.NumberFormat('de-DE', {
style: 'currency',
currency: 'EUR',
currencyDisplay: 'name'
});
console.log(deFormatter.format(25));
// 출력: "25,00 Euro"
const frFormatter = new Intl.NumberFormat('fr-FR', {
style: 'currency',
currency: 'EUR',
currencyDisplay: 'name'
});
console.log(frFormatter.format(25));
// 출력: "25,00 euros"
영어는 euros, 독일어는 Euro, 프랑스어는 euros를 사용합니다. API는 이러한 언어적 변형을 자동으로 처리하며, 필요한 경우 복수형도 포함합니다.
다른 통화는 각 로케일에 맞는 적절한 언어로 이름을 표시합니다.
const enFormatter = new Intl.NumberFormat('en-US', {
style: 'currency',
currency: 'JPY',
currencyDisplay: 'name'
});
console.log(enFormatter.format(1000));
// 출력: "1,000 Japanese yen"
const deFormatter = new Intl.NumberFormat('de-DE', {
style: 'currency',
currency: 'JPY',
currencyDisplay: 'name'
});
console.log(deFormatter.format(1000));
// 출력: "1.000 Japanische Yen"
영어는 Japanese yen을 보여주는 반면 독일어는 Japanische Yen을 보여줍니다. 이러한 현지화는 사용자가 자신의 언어로 익숙하지 않은 통화를 이해하는 데 도움이 됩니다.
공간보다 명확성이 더 중요할 때 이름 형식을 사용하세요. 교육 콘텐츠, 접근성 중심 인터페이스, 사용자가 익숙하지 않은 통화를 접할 수 있는 상황에서는 철자가 완전히 표시된 이름이 유용합니다. 이 형식은 통화 이름이 기호보다 처리하기 쉬운 음성 인터페이스에서도 잘 작동합니다.
단점은 공간입니다. 통화 이름은 기호나 코드보다 상당히 길어집니다. 컴팩트한 모바일 인터페이스에서는 $25.00이 잘 작동할 수 있는 곳에 25.00 US dollars를 맞추기 어려울 수 있습니다.
올바른 표시 형식 선택하기
공간 제약, 사용자 친숙도, 모호성 우려에 따라 currencyDisplay 값을 선택하세요.
사용자가 단일 통화로 운영하는 일상적인 인터페이스에는 symbol을 사용하세요. 전자상거래 사이트, 가격 페이지, 소비자 애플리케이션에 기호가 적합합니다. 사용자는 기호를 빠르게 인식하고 기호는 최소한의 공간을 차지합니다.
공간이 극히 제한적이고 통화 컨텍스트가 명확할 때는 narrowSymbol을 사용하세요. 모바일 앱, 컴팩트한 테이블, 대시보드 위젯은 더 짧은 형식의 이점을 얻습니다. 인터페이스의 다른 곳에서 통화가 식별되는지 확인하세요.
모호함 없이 여러 통화를 구분해야 할 때는 code를 사용하세요. 금융 애플리케이션, 환율 계산기, 국제 비즈니스 도구, 회계 시스템은 코드가 제공하는 정밀도가 필요합니다. 이 형식은 기호가 문제를 일으킬 수 있는 기술적 컨텍스트에서도 잘 작동합니다.
최대한의 명확성이 필요할 때는 name을 사용하세요. 접근성 중심 인터페이스, 교육 콘텐츠, 음성 인터페이스, 익숙하지 않은 통화가 있는 컨텍스트는 철자가 풀린 이름의 이점을 얻습니다. 이 형식은 국제 통화에 대해 배우는 사용자에게도 도움이 됩니다.
사용자가 형식 간에 전환할 수 있도록 하여 동일한 데이터의 여러 보기를 제공할 수 있습니다. 금융 대시보드는 기본적으로 기호를 표시하고 상세 분석을 위해 코드로 전환하는 옵션을 제공할 수 있습니다. 환율 계산기는 인터페이스에서 코드를 사용하지만 툴팁에 이름을 표시할 수 있습니다.
사용자의 전문성 수준을 고려하세요. 금융 전문가는 통화 코드를 이해합니다. 일반 소비자는 기호를 기대합니다. 국제 사용자는 통화를 구분하기 위해 코드가 필요할 수 있습니다. 접근성 요구가 있는 사용자는 이름의 이점을 얻습니다.
currencyDisplay를 다른 옵션과 결합하기
'currencyDisplay' 옵션은 모든 다른 숫자 서식 옵션과 함께 작동합니다. 통화 형식을 선택하면서 소수점 자릿수, 반올림, 부호 표시를 제어할 수 있습니다.
const formatter = new Intl.NumberFormat('en-US', {
style: 'currency',
currency: 'USD',
currencyDisplay: 'code',
minimumFractionDigits: 2,
maximumFractionDigits: 2
});
console.log(formatter.format(25.5));
// Output: "USD 25.50"
코드 형식은 지정된 소수점 자릿수 설정과 함께 나타납니다. currencyDisplay를 signDisplay, notation 또는 사용자 지정 반올림 규칙과 같은 다른 옵션과 결합할 수 있습니다.
다양한 표시 형식은 회계 표기법과 함께 작동합니다.
const formatter = new Intl.NumberFormat('en-US', {
style: 'currency',
currency: 'USD',
currencyDisplay: 'name',
currencySign: 'accounting'
});
console.log(formatter.format(-25));
// Output: "(25.00 US dollars)"
회계 형식 괄호는 철자가 풀린 통화 이름과 결합됩니다.
기억해야 할 사항
currencyDisplay 옵션은 형식이 지정된 금액에서 통화 단위가 표시되는 방식을 제어합니다. 일상적인 표시에는 symbol을, 공간이 제한된 인터페이스에는 narrowSymbol을, 명확한 국제 컨텍스트에는 code를, 최대한의 명확성과 접근성을 위해서는 name을 사용하세요.
사용 가능한 공간, 사용자 전문성, 통화 간 모호성 여부에 따라 형식을 선택하세요. currencyDisplay를 다른 형식 지정 옵션과 결합하여 애플리케이션에 필요한 정확한 표현을 만들 수 있습니다.