통화 기호 대신 전체 통화 이름을 표시하는 방법은 무엇인가요?

소개

통화 기호는 국제 애플리케이션에서 모호함을 야기합니다. 달러 기호 $는 미국 달러, 캐나다 달러, 호주 달러 및 기타 12개 이상의 국가 통화를 나타냅니다. 사용자는 기호만으로는 어떤 통화를 의미하는지 판단할 수 없습니다.

전체 통화 이름은 이러한 혼란을 제거합니다. $1,234.56를 표시하는 대신 1,234.56 US dollars를 표시합니다. 통화가 명확해지고 사용자는 자신이 보는 것을 정확히 이해합니다.

JavaScript는 전체 통화 이름을 표시하는 두 가지 접근 방식을 제공합니다. 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));
// Output: 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));
// Output: $100.00

code

세 글자 ISO 4217 통화 코드를 표시합니다.

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

console.log(formatter.format(100));
// Output: USD 100.00

name

현지화된 전체 통화 이름을 표시합니다.

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

console.log(formatter.format(100));
// Output: 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;

// English
const enFormatter = new Intl.NumberFormat('en-US', {
  style: 'currency',
  currency: 'USD',
  currencyDisplay: 'name'
});
console.log(enFormatter.format(usdollar));
// Output: 1,234.56 US dollars

// French
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

// Japanese
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 통화 코드를 전달하세요. 메서드는 현지화된 통화 이름을 반환합니다.

모든 로케일에서 통화 이름을 가져올 수 있습니다.

// Get currency names in French
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를 더 잘 이해합니다.

공간 제약이 있고 맥락상 통화가 명확한 경우 간결한 표시를 위해 통화 기호를 사용하세요. 명확성과 접근성이 우선시되는 경우 전체 이름을 사용하세요.