¿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 a qué moneda te refieres solo con el símbolo.

Los nombres completos de las monedas eliminan esta confusión. En lugar de mostrar $1,234.56, muestras 1,234.56 dólares estadounidenses. La moneda se vuelve explícita y los usuarios entienden exactamente lo que ven.

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

Formatear cantidades de moneda con nombres completos

La opción currencyDisplay en Intl.NumberFormat controla cómo aparecen las monedas en las cantidades formateadas. Configúrala como "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));
// Resultado: 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 del locale 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));
// Resultado: $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));
// Resultado: USD 100.00

name

Muestra el nombre completo localizado de la moneda.

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

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

narrowSymbol

Muestra un formato de símbolo compacto sin diferenciació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. Úsala cuando el contexto hace que la moneda sea obvia.

Cómo afecta la configuración regional a los nombres de 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;

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

// Francés
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

// Japonés
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

Utiliza Intl.DisplayNames cuando necesites solo el nombre de la moneda 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 localizado de la moneda.

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

// Obtener nombres de monedas en francés
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

Utiliza los nombres completos de monedas en estas situaciones.

Informes y estados financieros

Muestra los nombres completos en documentos financieros donde la precisión es importante.

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 multi-moneda

Muestra los 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 los nombres de las 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 discapacidades visuales comprenden mejor 100.00 US dollars que $100.00.

Utiliza símbolos de moneda para visualizaciones compactas donde existen limitaciones de espacio y el contexto hace que la moneda sea clara. Usa nombres completos cuando la claridad y la accesibilidad tienen prioridad.