통화 기호 대신 전체 통화 이름을 표시하는 방법은 무엇인가요?
currencyDisplay 옵션을 사용하여 '$' 대신 'US dollars'를 표시합니다
소개
통화 기호는 국제 애플리케이션에서 모호함을 만듭니다. 달러 기호 $는 미국 달러, 캐나다 달러, 호주 달러 및 십여 개 이상의 다른 국가의 통화를 나타냅니다. 사용자는 기호만으로는 어떤 통화를 의미하는지 알 수 없습니다.
전체 통화 이름은 이러한 혼란을 제거합니다. $1,234.56 대신 1,234.56 US dollars를 표시합니다. 통화가 명시적으로 표시되어 사용자는 정확히 무엇을 보고 있는지 이해할 수 있습니다.
자바스크립트는 전체 통화 이름을 표시하는 두 가지 접근 방식을 제공합니다. Intl.NumberFormat을 사용하여 이름이 포함된 통화 금액을 형식화하거나, Intl.DisplayNames를 사용하여 독립적인 통화 이름을 얻을 수 있습니다.
전체 이름으로 통화 금액 형식화하기
Intl.NumberFormat의 currencyDisplay 옵션은 형식화된 금액에서 통화가 표시되는 방식을 제어합니다. 전체 통화 이름을 표시하려면 이 값을 "name"으로 설정하세요.
const formatter = new Intl.NumberFormat('en-US', {
style: 'currency',
currency: 'USD',
currencyDisplay: 'name'
});
console.log(formatter.format(1234.56));
// 출력: 1,234.56 US dollars
포맷터는 금액 뒤에 완전한 통화 이름을 포함합니다. 이름은 지정한 로케일의 문법 규칙을 따릅니다.
currencyDisplay 옵션 값
currencyDisplay 옵션은 통화가 표시되는 방식을 결정하는 네 가지 값을 허용합니다.
symbol (기본값)
지역화된 통화 기호를 표시합니다.
const formatter = new Intl.NumberFormat('en-US', {
style: 'currency',
currency: 'USD',
currencyDisplay: 'symbol'
});
console.log(formatter.format(100));
// 출력: $100.00
code
세 글자로 된 ISO 4217 통화 코드를 표시합니다.
const formatter = new Intl.NumberFormat('en-US', {
style: 'currency',
currency: 'USD',
currencyDisplay: 'code'
});
console.log(formatter.format(100));
// 출력: USD 100.00
name
전체 지역화된 통화 이름을 표시합니다.
const formatter = new Intl.NumberFormat('en-US', {
style: 'currency',
currency: 'USD',
currencyDisplay: 'name'
});
console.log(formatter.format(100));
// 출력: 100.00 US dollars
narrowSymbol
국가 구분 없이 간결한 기호 형식을 표시합니다.
const formatter = new Intl.NumberFormat('en-US', {
style: 'currency',
currency: 'USD',
currencyDisplay: 'narrowSymbol'
});
console.log(formatter.format(100));
// Output: $100.00
narrowSymbol 옵션은 미국 달러에 대해 US$ 대신 $를 생성합니다. 컨텍스트에서 통화가 명확할 때 이 옵션을 사용하세요.
로케일이 통화 이름에 미치는 영향
'Intl.NumberFormat'에 전달하는 로케일은 통화 이름의 언어와 문법을 결정합니다.
const usdollar = 1234.56;
// 영어
const enFormatter = new Intl.NumberFormat('en-US', {
style: 'currency',
currency: 'USD',
currencyDisplay: 'name'
});
console.log(enFormatter.format(usdollar));
// Output: 1,234.56 US dollars
// 프랑스어
const frFormatter = new Intl.NumberFormat('fr-FR', {
style: 'currency',
currency: 'USD',
currencyDisplay: 'name'
});
console.log(frFormatter.format(usdollar));
// Output: 1 234,56 dollars des États-Unis
// 일본어
const jaFormatter = new Intl.NumberFormat('ja-JP', {
style: 'currency',
currency: 'USD',
currencyDisplay: 'name'
});
console.log(jaFormatter.format(usdollar));
// Output: 1,234.56 米ドル
각 로케일은 통화 이름에 대한 자체 번역을 제공합니다. 숫자 형식도 로케일 규칙에 따라 변경됩니다.
금액 없이 통화 이름 가져오기
금액을 포맷하지 않고 통화 이름만 필요할 때는 Intl.DisplayNames를 사용하세요.
const currencyNames = new Intl.DisplayNames('en-US', {
type: 'currency'
});
console.log(currencyNames.of('USD'));
// Output: US Dollar
console.log(currencyNames.of('EUR'));
// Output: Euro
console.log(currencyNames.of('JPY'));
// Output: Japanese Yen
of() 메서드에 ISO 4217 통화 코드를 전달하세요. 이 메서드는 지역화된 통화 이름을 반환합니다.
모든 로케일에서 통화 이름을 가져올 수 있습니다.
// 프랑스어로 통화 이름 가져오기
const frCurrencyNames = new Intl.DisplayNames('fr-FR', {
type: 'currency'
});
console.log(frCurrencyNames.of('USD'));
// Output: dollar des États-Unis
console.log(frCurrencyNames.of('EUR'));
// Output: euro
통화 전체 이름을 사용해야 하는 경우
다음과 같은 상황에서 통화의 전체 이름을 사용하세요.
재무 보고서 및 명세서
정확성이 중요한 재무 문서에서는 전체 이름을 표시하세요.
const formatter = new Intl.NumberFormat('en-US', {
style: 'currency',
currency: 'USD',
currencyDisplay: 'name'
});
console.log(`Total revenue: ${formatter.format(1500000)}`);
// Output: Total revenue: 1,500,000.00 US dollars
다중 통화 애플리케이션
사용자가 여러 통화를 동시에 다룰 때 전체 이름을 표시하세요.
const currencies = [
{ code: 'USD', amount: 1000 },
{ code: 'EUR', amount: 850 },
{ code: 'GBP', amount: 750 }
];
currencies.forEach(item => {
const formatter = new Intl.NumberFormat('en-US', {
style: 'currency',
currency: item.code,
currencyDisplay: 'name'
});
console.log(formatter.format(item.amount));
});
// Output:
// 1,000.00 US dollars
// 850.00 euros
// 750.00 British pounds
통화 선택 인터페이스
드롭다운이나 선택 목록에 통화 이름을 표시하세요.
const currencies = ['USD', 'EUR', 'GBP', 'JPY', 'CAD'];
const displayNames = new Intl.DisplayNames('en-US', {
type: 'currency'
});
const options = currencies.map(code => ({
value: code,
label: displayNames.of(code)
}));
console.log(options);
// Output:
// [
// { value: 'USD', label: 'US Dollar' },
// { value: 'EUR', label: 'Euro' },
// { value: 'GBP', label: 'British Pound' },
// { value: 'JPY', label: 'Japanese Yen' },
// { value: 'CAD', label: 'Canadian Dollar' }
// ]
접근성
스크린 리더는 통화 기호보다 전체 통화 이름을 더 명확하게 읽어줍니다. 시각 장애가 있는 사용자는 $100.00보다 100.00 US dollars를 더 잘 이해합니다.
공간 제약이 있고 맥락상 통화가 명확한 경우에는 간결한 표시를 위해 통화 기호를 사용하세요. 명확성과 접근성이 우선시되는 경우에는 전체 이름을 사용하세요.