¿Cómo mostrar nombres completos de monedas en lugar de símbolos?

Introducción

Los símbolos de moneda crean ambigüedad en aplicaciones internacionales. El signo de dólar $ representa dólares estadounidenses, dólares canadienses, dólares australianos y monedas de más de una docena de otros países. Los usuarios no pueden determinar qué moneda se refiere solo con el símbolo.

Los nombres completos de moneda eliminan esta confusión. En lugar de mostrar $1,234.56, se muestra 1,234.56 US dollars. La moneda se vuelve explícita y los usuarios entienden exactamente lo que ven.

JavaScript proporciona dos enfoques para mostrar nombres completos de moneda. Puedes formatear cantidades monetarias con nombres usando Intl.NumberFormat, u obtener nombres de moneda independientes usando Intl.DisplayNames.

Formatear cantidades monetarias con nombres completos

La opción currencyDisplay en Intl.NumberFormat controla cómo aparecen las monedas en las cantidades formateadas. Establécela en "name" para mostrar el nombre completo de la moneda.

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

El formateador incluye el nombre completo de la moneda después de la cantidad. El nombre sigue las reglas gramaticales de la configuración regional que especifiques.

Los valores de la opción currencyDisplay

La opción currencyDisplay acepta cuatro valores que determinan cómo aparece la moneda.

symbol (predeterminado)

Muestra un símbolo de moneda localizado.

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

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

code

Muestra el código de moneda ISO 4217 de tres letras.

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

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

name

Muestra el nombre completo de la moneda localizado.

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

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

narrowSymbol

Muestra un formato de símbolo compacto sin desambiguación de país.

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

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

La opción narrowSymbol produce $ en lugar de US$ para dólares estadounidenses. Utiliza esto cuando el contexto hace que la moneda sea obvia.

Cómo afecta la configuración regional a los nombres de las monedas

La configuración regional que pasas a Intl.NumberFormat determina el idioma y la gramática del nombre de la moneda.

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 米ドル

Cada configuración regional proporciona su propia traducción del nombre de la moneda. El formato numérico también cambia según las convenciones de la configuración regional.

Obtener nombres de monedas sin cantidades

Usa Intl.DisplayNames cuando necesites el nombre de la moneda solo, sin formatear una cantidad.

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

Pasa códigos de moneda ISO 4217 al método of(). El método devuelve el nombre de la moneda localizado.

Puedes obtener nombres de monedas en cualquier configuración regional.

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

Cuándo usar nombres completos de monedas

Usa nombres completos de monedas en estas situaciones.

Informes y estados financieros

Muestra nombres completos en documentos financieros donde la precisión importa.

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

Aplicaciones multidivisa

Muestra nombres completos cuando los usuarios trabajan con múltiples monedas simultáneamente.

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

Interfaces de selección de moneda

Muestra nombres de monedas en menús desplegables o listas de selección.

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' }
// ]

Accesibilidad

Los lectores de pantalla anuncian los nombres completos de las monedas con mayor claridad que los símbolos. Los usuarios con discapacidad visual entienden mejor 100.00 US dollars que $100.00.

Usa símbolos de moneda para visualizaciones compactas donde existan restricciones de espacio y el contexto deje clara la moneda. Usa nombres completos cuando la claridad y la accesibilidad sean prioritarias.