Cómo mostrar moneda como símbolo, código o nombre

Utiliza la opción currencyDisplay para controlar si las monedas aparecen como $, USD o dólares estadounidenses

Introducción

Cuando muestras un precio o importe monetario, necesitas decidir cómo representar la moneda. El precio de un producto puede mostrarse como $25, USD 25 o 25 dólares estadounidenses. Cada formato sirve un propósito diferente y funciona mejor en contextos distintos.

El formato de símbolo funciona bien para interfaces de compra cotidianas donde los usuarios saben qué moneda esperar. El formato de código elimina la ambigüedad en documentos comerciales internacionales donde aparecen múltiples monedas. El formato de nombre proporciona máxima claridad para herramientas de accesibilidad y contenido educativo.

JavaScript proporciona la opción currencyDisplay en Intl.NumberFormat para controlar cómo aparecen las monedas. Esta lección explica los cuatro formatos disponibles, cómo difieren entre locales y qué formato elegir para tu caso de uso específico.

Comprendiendo la opción currencyDisplay

La opción currencyDisplay controla cómo aparece la unidad de moneda al formatear importes monetarios. No cambia el valor numérico, solo cómo se representa la moneda.

Hay cuatro valores disponibles:

  • symbol muestra un símbolo de moneda localizado como $ o €
  • narrowSymbol muestra un símbolo compacto como $ en lugar de US$
  • code muestra el código de moneda ISO como USD o EUR
  • name muestra el nombre completo de la moneda como dólares estadounidenses o euros

Cada formato crea una representación visual diferente del mismo importe. La elección depende de los requisitos de tu interfaz de usuario, el espacio disponible y las expectativas de la audiencia.

Usando el formato symbol para visualizaciones cotidianas

El formato symbol es el valor predeterminado de currencyDisplay. Muestra un símbolo de moneda localizado que los usuarios de un locale determinado esperan ver.

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

console.log(formatter.format(25));
// Output: "$25.00"

Este formato produce la representación más familiar para los usuarios. Los estadounidenses esperan ver signos de dólar, los europeos esperan ver símbolos de euro y los usuarios británicos esperan ver símbolos de libra.

El símbolo se adapta según el locale y la moneda. Cuando formateas dólares estadounidenses para un locale alemán, el formateador utiliza un símbolo localizado que incluye la designación del país.

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

console.log(usFormatter.format(25));
// Output: "$25.00"

const deFormatter = new Intl.NumberFormat('de-DE', {
  style: 'currency',
  currency: 'USD',
  currencyDisplay: 'symbol'
});

console.log(deFormatter.format(25));
// Output: "25,00 $"

Observa cómo el formateador alemán coloca el signo de dólar después del importe y utiliza una coma para el separador decimal. Estas convenciones específicas del locale se aplican automáticamente.

Cuando formateas euros para diferentes locales, el símbolo del euro aparece pero las convenciones de formato cambian.

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

console.log(usFormatter.format(25));
// Output: "€25.00"

const deFormatter = new Intl.NumberFormat('de-DE', {
  style: 'currency',
  currency: 'EUR',
  currencyDisplay: 'symbol'
});

console.log(deFormatter.format(25));
// Output: "25,00 €"

El formato de símbolo funciona bien cuando los usuarios operan dentro de un contexto de moneda única. Un sitio de comercio electrónico estadounidense que muestra precios en USD puede usar signos de dólar de forma segura. Un sitio europeo que muestra precios en EUR puede usar símbolos de euro.

Sin embargo, el formato de símbolo puede crear ambigüedad cuando múltiples monedas comparten símbolos similares. Los dólares canadienses, australianos y estadounidenses utilizan el signo de dólar. En estos casos, algunos locales añaden un prefijo de país para desambiguar.

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

console.log(usFormatter.format(25));
// Output: "CA$25.00"

El formateador añade CA$ para distinguir los dólares canadienses de los dólares estadounidenses al formatear para un locale estadounidense.

Uso del formato narrowSymbol para visualizaciones compactas

El formato narrowSymbol muestra el símbolo de moneda sin prefijos de país. Esto crea una representación más compacta que funciona bien en interfaces con espacio limitado.

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"

Para dólares estadounidenses en un locale estadounidense, ambos formatos producen el mismo resultado porque no se necesita prefijo de país. La diferencia se hace evidente al formatear monedas que de otro modo podrían incluir una designación de país.

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"

El formato de símbolo reducido elimina el prefijo CA, mostrando solo el signo de dólar. Esto ahorra espacio pero pierde la distinción entre dólares canadienses y estadounidenses.

Utiliza narrowSymbol cuando el espacio es limitado y el contexto de la moneda está claro en otras partes de la interfaz. Las aplicaciones móviles, paneles compactos y tablas de datos se benefician del formato más corto. Sin embargo, asegúrate de que los usuarios puedan determinar qué moneda están viendo a través de otros medios, como un selector de moneda o una etiqueta de encabezado.

El formato reducido también afecta a otras monedas en diferentes locales.

const narrowFormatter = new Intl.NumberFormat('de-DE', {
  style: 'currency',
  currency: 'EUR',
  currencyDisplay: 'narrowSymbol'
});

console.log(narrowFormatter.format(25));
// Output: "25,00 €"

Cada locale define su propio formato de símbolo reducido según las convenciones locales.

Uso del formato de código para visualizaciones inequívocas

El formato code muestra el código de moneda ISO 4217 en lugar de un símbolo. Este código de tres letras identifica de forma única cada moneda sin ambigüedad.

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

console.log(formatter.format(25));
// Output: "USD 25.00"

El código aparece en lugar del símbolo, dejando inmediatamente claro qué moneda representa el importe. Este formato funciona en todos los locales con abreviaturas consistentes.

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

console.log(usFormatter.format(25));
// Output: "EUR 25.00"

const deFormatter = new Intl.NumberFormat('de-DE', {
  style: 'currency',
  currency: 'EUR',
  currencyDisplay: 'code'
});

console.log(deFormatter.format(25));
// Output: "25,00 EUR"

El código EUR aparece en ambos formatos, aunque la posición y el formato numérico siguen las convenciones del locale. Esta combinación de códigos de moneda universales con formato numérico específico del locale hace que el formato de código sea valioso para contextos internacionales.

El formato de código elimina la confusión entre monedas que comparten símbolos.

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

console.log(usdFormatter.format(25));
// Output: "USD 25.00"

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

console.log(cadFormatter.format(25));
// Output: "CAD 25.00"

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

console.log(audFormatter.format(25));
// Output: "AUD 25.00"

Cada variante de dólar recibe un código distinto. Los usuarios pueden distinguir inmediatamente entre dólares estadounidenses, dólares canadienses y dólares australianos.

Utiliza el formato de código en informes financieros, facturas internacionales, sistemas contables y cualquier contexto donde la claridad de la moneda sea crítica. El formato también funciona bien en APIs y exportaciones de datos donde los símbolos podrían causar problemas de codificación.

El inconveniente es la familiaridad reducida. La mayoría de los consumidores reconocen $ pero pueden no saber inmediatamente qué representa CAD. Utiliza códigos cuando tu audiencia los comprenda o cuando la precisión supere la familiaridad.

Uso del formato de nombre para máxima claridad

El formato name muestra el nombre completo de la moneda en el idioma del locale. Esto proporciona claridad completa sobre qué moneda representa el importe.

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

console.log(formatter.format(25));
// Output: "25.00 US dollars"

El nombre de la moneda aparece deletreado, sin dejar ambigüedad sobre qué representa el importe. Este formato es especialmente valioso para la accesibilidad. Los lectores de pantalla pueden pronunciar los nombres de moneda claramente, mientras que los símbolos podrían anunciarse de forma inconsistente.

El nombre se adapta al locale, mostrándose en el idioma apropiado.

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

console.log(enFormatter.format(25));
// Output: "25.00 euros"

const deFormatter = new Intl.NumberFormat('de-DE', {
  style: 'currency',
  currency: 'EUR',
  currencyDisplay: 'name'
});

console.log(deFormatter.format(25));
// Output: "25,00 Euro"

const frFormatter = new Intl.NumberFormat('fr-FR', {
  style: 'currency',
  currency: 'EUR',
  currencyDisplay: 'name'
});

console.log(frFormatter.format(25));
// Output: "25,00 euros"

El inglés usa euros, el alemán usa Euro y el francés usa euros. La API maneja estas variaciones lingüísticas automáticamente, incluyendo las formas plurales cuando sea apropiado.

Las diferentes monedas muestran sus nombres en el idioma apropiado para cada locale.

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

console.log(enFormatter.format(1000));
// Output: "1,000 Japanese yen"

const deFormatter = new Intl.NumberFormat('de-DE', {
  style: 'currency',
  currency: 'JPY',
  currencyDisplay: 'name'
});

console.log(deFormatter.format(1000));
// Output: "1.000 Japanische Yen"

El inglés muestra Japanese yen mientras que el alemán muestra Japanische Yen. Esta localización ayuda a los usuarios a comprender monedas poco familiares en su propio idioma.

Utiliza el formato de nombre cuando la claridad sea más importante que el espacio. El contenido educativo, las interfaces centradas en la accesibilidad y los contextos donde los usuarios puedan encontrar monedas poco familiares se benefician de los nombres deletreados. El formato también funciona bien para interfaces de voz donde los nombres de moneda son más fáciles de procesar que los símbolos.

El inconveniente es el espacio. Los nombres de moneda son significativamente más largos que los símbolos o códigos. Una interfaz móvil compacta podría tener dificultades para ajustar 25,00 dólares estadounidenses donde 25,00 $ funcionaría bien.

Elección del formato de visualización correcto

Selecciona tu valor de currencyDisplay según las restricciones de espacio, la familiaridad de la audiencia y las preocupaciones de ambigüedad.

Utiliza symbol para interfaces cotidianas donde los usuarios operan en una sola moneda. Los sitios de comercio electrónico, las páginas de precios y las aplicaciones de consumo funcionan bien con símbolos. Los usuarios reconocen los símbolos rápidamente y los símbolos ocupan un espacio mínimo.

Utiliza narrowSymbol cuando el espacio sea extremadamente limitado y el contexto de la moneda sea claro. Las aplicaciones móviles, las tablas compactas y los widgets de panel se benefician del formato más corto. Asegúrate de que la moneda esté identificada en otro lugar de la interfaz.

Utiliza code cuando necesites distinguir entre múltiples monedas sin ambigüedad. Las aplicaciones financieras, los convertidores de moneda, las herramientas de negocios internacionales y los sistemas de contabilidad necesitan la precisión que proporcionan los códigos. El formato también funciona bien en contextos técnicos donde los símbolos podrían causar problemas.

Utiliza name cuando se requiera máxima claridad. Las interfaces enfocadas en accesibilidad, el contenido educativo, las interfaces de voz y los contextos con monedas no familiares se benefician de los nombres escritos completamente. El formato también ayuda a los usuarios que están aprendiendo sobre monedas internacionales.

Puedes proporcionar múltiples vistas de los mismos datos permitiendo a los usuarios alternar entre formatos. Un panel financiero podría mostrar símbolos por defecto con una opción para cambiar a códigos para análisis detallado. Un convertidor de moneda podría usar códigos en la interfaz pero mostrar nombres en tooltips.

Considera el nivel de experiencia de tu usuario. Los profesionales financieros entienden los códigos de moneda. Los consumidores generales esperan símbolos. Los usuarios internacionales pueden necesitar códigos para distinguir monedas. Los usuarios con necesidades de accesibilidad se benefician de los nombres.

Combinando currencyDisplay con otras opciones

La opción currencyDisplay funciona con todas las demás opciones de formato de números. Puedes controlar los decimales, el redondeo y la visualización de signos mientras eliges tu formato de moneda.

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"

El formato de código aparece con la configuración de decimales especificada. Puedes combinar currencyDisplay con cualquier otra opción como signDisplay, notation o reglas de redondeo personalizadas.

Los diferentes formatos de visualización funcionan con la notación contable.

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)"

Los paréntesis del formato contable se combinan con el nombre de la moneda deletreado.

Qué recordar

La opción currencyDisplay controla cómo aparecen las unidades monetarias en los importes formateados. Utiliza symbol para visualizaciones cotidianas familiares, narrowSymbol para interfaces compactas con espacio limitado, code para contextos internacionales sin ambigüedad, y name para máxima claridad y accesibilidad.

Elige el formato según tu espacio disponible, la experiencia del usuario y si la ambigüedad entre monedas es una preocupación. Combina currencyDisplay con otras opciones de formato para crear la representación exacta que tu aplicación necesita.