Cómo mostrar la 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 cantidad monetaria, necesitas decidir cómo representar la moneda. El precio de un producto podría mostrarse como $25, USD 25, o 25 dólares estadounidenses. Cada formato sirve para un propósito diferente y funciona mejor en distintos contextos.

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.

Entendiendo la opción currencyDisplay

La opción currencyDisplay controla cómo aparece la unidad monetaria al formatear cantidades monetarias. 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 ISO de la moneda 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 de la misma cantidad. La elección depende de los requisitos de tu interfaz de usuario, el espacio disponible y las expectativas de la audiencia.

Usando el formato de símbolo para visualizaciones cotidianas

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

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

console.log(formatter.format(25));
// Resultado: "$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));
// Resultado: "$25.00"

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

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

Observa cómo el formateador alemán coloca el signo de dólar después de la cantidad y usa 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));
// Resultado: "€25.00"

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

console.log(deFormatter.format(25));
// Resultado: "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 con seguridad signos de dólar. 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 todos 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));
// Resultado: "CA$25.00"

El formateador añade CA$ para distinguir los dólares canadienses de los dólares estadounidenses cuando formatea 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 de EE.UU., ambos formatos producen la misma salida 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 estrecho 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.

Utilice narrowSymbol cuando el espacio sea limitado y el contexto de la moneda sea claro desde otras partes de la interfaz. Las aplicaciones móviles, los paneles compactos y las tablas de datos se benefician del formato más corto. Sin embargo, asegúrese 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 estrecho 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 estrecho basado en 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 manera ú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 de números siguen las convenciones del locale. Esta combinación de códigos de moneda universales con formato de números 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.

Utilice 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.

La contrapartida es una menor familiaridad. La mayoría de los consumidores reconocen $ pero pueden no saber inmediatamente qué representa CAD. Utilice códigos cuando su audiencia los entienda o cuando la precisión sea más importante que la familiaridad.

Uso del formato name para máxima claridad

El formato name muestra el nombre completo de la moneda en el idioma del locale. Esto proporciona total claridad 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 escrito completamente, sin dejar ambigüedad sobre lo que representa el importe. Este formato es especialmente valioso para la accesibilidad. Los lectores de pantalla pueden pronunciar los nombres de las monedas claramente, mientras que los símbolos podrían anunciarse de manera 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 formas plurales cuando corresponde.

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 entender monedas no familiares en su propio idioma.

Utiliza el formato name cuando la claridad sea más importante que el espacio. El contenido educativo, las interfaces enfocadas en accesibilidad y los contextos donde los usuarios pueden encontrar monedas no familiares se benefician de los nombres escritos completamente. El formato también funciona bien para interfaces de voz donde los nombres de monedas son más fáciles de procesar que los símbolos.

La desventaja es el espacio. Los nombres de monedas 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 US dollars donde $25.00 funcionaría bien.

Elegir el formato de visualización correcto

Selecciona el valor de currencyDisplay según las limitaciones de espacio, la familiaridad del público 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, páginas de precios y aplicaciones de consumo funcionan bien con símbolos. Los usuarios reconocen los símbolos rápidamente y ocupan un espacio mínimo.

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

Utiliza code cuando necesites distinguir entre múltiples monedas sin ambigüedad. Las aplicaciones financieras, convertidores de divisas, herramientas de negocios internacionales y sistemas contables 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 centradas en la accesibilidad, contenido educativo, interfaces de voz y contextos con monedas poco familiares se benefician de los nombres deletreados. El formato también ayuda a los usuarios que aprenden 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 un análisis detallado. Un convertidor de divisas 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 del signo 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.

Diferentes formatos de visualización funcionan con 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 deletreado de la moneda.

Qué recordar

La opción currencyDisplay controla cómo aparecen las unidades de moneda en los importes formateados. Utiliza symbol para visualizaciones cotidianas familiares, narrowSymbol para interfaces compactas con espacio limitado, code para contextos internacionales inequívocos y name para máxima claridad y accesibilidad.

Elige el formato según el 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.