CÓMO FORMATEAR NÚMEROS COMO MONEDA EN JAVASCRIPT

November 16, 2025

Introducción al formateo de números como moneda en JavaScript

En el desarrollo de aplicaciones web, especialmente en tiendas en línea o plataformas financieras, presentar precios de manera clara y comprensible es fundamental. Los datos numéricos provenientes de una API, como precios de productos, suelen llegar en formatos crudos, como 14340 o 10.99. Mostrar estos valores directamente en una interfaz de usuario puede resultar confuso, ya que los usuarios esperan ver símbolos de moneda, separadores de miles y decimales en posiciones correctas según su región. Por ejemplo, el número 14340 debería mostrarse como $14,340.00 en dólares estadounidenses, ₹14,340.00 en rupias indias o €14.340,00 en euros, dependiendo del contexto cultural y geográfico. En JavaScript, la solución más eficiente para este problema es utilizar el constructor Intl.NumberFormat, una API nativa que permite formatear números de manera sensible al idioma y la región, incluyendo formatos de moneda. Este tutorial explora cómo usar Intl.NumberFormat para transformar números en representaciones de moneda adaptadas a diferentes locales, con ejemplos prácticos y explicaciones detalladas. Está diseñado para desarrolladores que buscan implementar soluciones robustas en aplicaciones web modernas.

¿Por qué formatear números como moneda?

Cuando se trabaja con datos financieros, como precios de productos en una tienda en línea, los números crudos no son suficientes para una buena experiencia de usuario. Un valor como 14340 no indica si representa dólares, euros o cualquier otra moneda, y carece de separadores que faciliten su lectura. Concatenar manualmente un símbolo de moneda, como $14340, no resuelve el problema, ya que no incluye separadores de miles ni decimales consistentes con las convenciones locales. Por ejemplo, en Estados Unidos se usa una coma para separar miles y un punto para decimales ($14,340.00), mientras que en Alemania se invierten estos separadores (€14.340,00). El método Intl.NumberFormat resuelve estos problemas al proporcionar un formato automático que respeta las convenciones de cada región, incluyendo el símbolo de moneda correcto y la colocación adecuada de separadores. Esto no solo mejora la legibilidad, sino que también hace que las aplicaciones sean más accesibles y profesionales para audiencias globales.

A continuación, se muestra un ejemplo básico de cómo formatear un número como moneda en dólares estadounidenses:

const precio = 14340;
const formatoUSD = new Intl.NumberFormat("en-US", {
    style: "currency",
    currency: "USD",
});
console.log(`Precio formateado: ${formatoUSD.format(precio)}`);

Precio formateado: $14,340.00

Este código transforma el número 14340 en una cadena formateada como $14,340.00, lista para mostrarse en una interfaz de usuario.

Entendiendo el constructor Intl.NumberFormat

El constructor Intl.NumberFormat es parte de la API de Internacionalización de JavaScript (ECMAScript Internationalization API), diseñada para formatear números, fechas y cadenas de manera sensible al idioma y la región. Este constructor crea objetos que permiten formatear números en diferentes estilos, como decimales, porcentajes o monedas. Para formatear números como moneda, se utilizan dos parámetros principales: locales y options. Ambos son opcionales, pero esenciales para lograr un formateo personalizado.

La sintaxis básica es:

new Intl.NumberFormat(locales, options);

También es posible omitir la palabra new, ya que ambas formas producen el mismo resultado:

Intl.NumberFormat(locales, options);

Si no se proporcionan parámetros, Intl.NumberFormat aplica un formateo básico que añade separadores de miles según la configuración predeterminada del sistema:

const precio = 14340;
console.log(new Intl.NumberFormat().format(precio));

14,340

Este resultado no incluye un símbolo de moneda ni decimales, por lo que no es ideal para representar precios. Para lograr un formato de moneda completo, es necesario especificar los parámetros locales y options.

El parámetro locales: Adaptación a regiones específicas

El parámetro locales es una cadena o un arreglo de cadenas que define la región o el idioma para el formateo. Por ejemplo, 'en-US' representa inglés estadounidense, 'en-IN' inglés indio y 'de-DE' alemán de Alemania. Este parámetro determina cómo se agrupan los miles y qué separadores se utilizan, pero no añade símbolos de moneda por sí solo.

Veamos cómo afecta el parámetro locales al formateo de un número:

const precio = 143450;
console.log(new Intl.NumberFormat("en-US").format(precio));
console.log(new Intl.NumberFormat("en-IN").format(precio));
console.log(new Intl.NumberFormat("de-DE").format(precio));

143,450
1,43,450
143.450

En este ejemplo, el número 143450 se formatea con diferentes separadores según la región. En 'en-US', se usa una coma para los miles; en 'en-IN', se agrupan los miles de forma distinta (dos dígitos después del primer grupo); y en 'de-DE', se usa un punto. Este parámetro es crucial para garantizar que el formato sea culturalmente apropiado, pero para incluir un símbolo de moneda, es necesario usar el parámetro options.

El parámetro options: Personalización del formato de moneda

El parámetro options es un objeto que permite personalizar el formateo, incluyendo el estilo, la moneda y otros detalles. Los atributos más relevantes para formatear números como moneda son:

style: Define el tipo de formateo. Para monedas, se usa 'currency'. Otros valores incluyen 'decimal' (para números genéricos) y 'percent' (para porcentajes).
currency: Especifica el código de la moneda según el estándar ISO 4217, como 'USD' (dólares estadounidenses), 'EUR' (euros), 'GBP' (libras esterlinas) o 'INR' (rupias indias). Este atributo es obligatorio cuando style es 'currency'.
useGrouping: Un booleano que activa o desactiva los separadores de miles. Por defecto, es true.
maximumSignificantDigits: Un número que limita los dígitos significativos, redondeando el valor si es necesario.

A continuación, se muestra cómo formatear un número en diferentes monedas usando el parámetro options:

const precio = 143450;

// Formato en dólares estadounidenses
const formatoUSD = new Intl.NumberFormat("en-US", {
    style: "currency",
    currency: "USD",
});

// Formato en libras esterlinas
const formatoGBP = new Intl.NumberFormat("en-GB", {
    style: "currency",
    currency: "GBP",
});

// Formato en rupias indias
const formatoINR = new Intl.NumberFormat("en-IN", {
    style: "currency",
    currency: "INR",
});

// Formato en euros
const formatoEUR = new Intl.NumberFormat("de-DE", {
    style: "currency",
    currency: "EUR",
});

console.log(`Dólares: ${formatoUSD.format(precio)}`);
console.log(`Libras: ${formatoGBP.format(precio)}`);
console.log(`Rupias: ${formatoINR.format(precio)}`);
console.log(`Euros: ${formatoEUR.format(precio)}`);

Dólares: $143,450.00
Libras: £143,450.00
Rupias: ₹1,43,450.00
Euros: €143,450.00

Este código muestra cómo el mismo número se formatea de manera diferente según la moneda y el locale, con el símbolo de moneda colocado correctamente y los separadores adaptados a cada región.

Personalización adicional con useGrouping

El atributo useGrouping controla si se aplican separadores de miles. Por defecto, está activado (true), lo que produce resultados como $143,450.00. Si se desactiva (false), los separadores desaparecen, lo que puede ser útil en contextos específicos, como códigos internos o visualizaciones minimalistas.

Ejemplo con useGrouping desactivado:

const precio = 143450;
const formatoEUR = new Intl.NumberFormat("de-DE", {
    style: "currency",
    currency: "EUR",
    useGrouping: false,
});
console.log(`Euros sin separadores: ${formatoEUR.format(precio)}`);

Euros sin separadores: €143450.00

Este formato puede ser útil en aplicaciones donde los separadores no son necesarios o podrían interferir con otros elementos de la interfaz.

Redondeo con maximumSignificantDigits

El atributo maximumSignificantDigits permite redondear un número según el número de dígitos significativos especificado. Esto es útil para simplificar precios largos o para cumplir con requisitos específicos de presentación.

Ejemplo de redondeo:

const precio = 143450;
const formatoGBP = new Intl.NumberFormat("en-GB", {
    style: "currency",
    currency: "GBP",
    maximumSignificantDigits: 3,
});
console.log(`Libras redondeadas: ${formatoGBP.format(precio)}`);

Libras redondeadas: £143,000

En este caso, el número 143450 se redondea a 143000 porque se limitó a tres dígitos significativos, lo que resulta en un valor más simplificado.

Aplicación práctica en un proyecto real

Supongamos que estás desarrollando una tienda en línea con una lista de productos, cada uno con un precio en formato numérico. El objetivo es mostrar estos precios en dólares estadounidenses con el formato adecuado. A continuación, se muestra cómo aplicar Intl.NumberFormat a un arreglo de productos:

const libros = [
    { id: 1, nombre: "Clean Code", precio: 10.99 },
    { id: 2, nombre: "Introduction to Algorithms", precio: 1199 },
    { id: 3, nombre: "Programming Pearls", precio: 1.05 },
    { id: 4, nombre: "Program or Be Programmed", precio: 14340 },
];

const formatoUSD = new Intl.NumberFormat("en-US", {
    style: "currency",
    currency: "USD",
});

libros.forEach((libro) => {
    console.log(`${libro.nombre}: ${formatoUSD.format(libro.precio)}`);
});

Clean Code: $10.99
Introduction to Algorithms: $1,199.00
Programming Pearls: $1.05
Program or Be Programmed: $14,340.00

Este código recorre el arreglo de productos y formatea cada precio como moneda en dólares estadounidenses. El resultado es una lista clara y profesional, lista para integrarse en una interfaz de usuario.

Integración en frameworks modernos

En frameworks como React, Vue o Angular, puedes encapsular la lógica de formateo en una función reutilizable para mantener el código limpio y evitar dependencias de bibliotecas externas. A continuación, se muestra un ejemplo de una función de utilidad en JavaScript que puedes importar en tus componentes:

// utils/formatCurrency.js
export function formatCurrency(valor, locale = "en-US", moneda = "USD") {
    const formato = new Intl.NumberFormat(locale, {
        style: "currency",
        currency: moneda,
    });
    return formato.format(valor);
}

Uso en un componente de React:

import { formatCurrency } from "./utils/formatCurrency";

function Producto({ nombre, precio }) {
    return (
        <div>
            <h3>{nombre}</h3>
            <p>Precio: {formatCurrency(precio)}</p>
        </div>
    );
}

export default Producto;

Este enfoque modular permite reutilizar la lógica de formateo en múltiples componentes, mejorando la mantenibilidad del código. Además, al usar una API nativa como Intl.NumberFormat, reduces la necesidad de instalar bibliotecas externas, lo que optimiza el rendimiento de tu aplicación.

Consideraciones de rendimiento y compatibilidad

La API Intl.NumberFormat está soportada en todos los navegadores modernos, incluyendo Chrome, Firefox, Safari y Edge, así como en Node.js (versión 0.12 en adelante). Esto la hace adecuada para la mayoría de los proyectos web actuales. Sin embargo, en entornos muy antiguos, como Internet Explorer 10 o versiones previas, puede ser necesario un polyfill, como el proporcionado por el paquete intl en npm.

En términos de rendimiento, crear un objeto Intl.NumberFormat tiene un costo inicial pequeño, pero es insignificante en la mayoría de los casos. Para aplicaciones con listas grandes de precios, es recomendable instanciar el objeto una sola vez y reutilizarlo, como se muestra en el ejemplo de la tienda en línea. Esto evita crear múltiples instancias innecesarias y optimiza el rendimiento.

Conclusiones

Formatear números como moneda en JavaScript es una tarea esencial para cualquier aplicación web que maneje datos financieros. La API Intl.NumberFormat ofrece una solución nativa, flexible y eficiente para transformar números crudos en representaciones de moneda adaptadas a diferentes regiones y culturas. Con solo unas líneas de código, puedes presentar precios con símbolos de moneda, separadores de miles y decimales en las posiciones correctas, mejorando la experiencia de usuario y la accesibilidad de tu aplicación. Este tutorial ha cubierto desde los conceptos básicos del constructor Intl.NumberFormat hasta su aplicación práctica en proyectos reales, incluyendo ejemplos de personalización y optimización. Al integrar esta herramienta en tus proyectos, ya sea en aplicaciones vanilla JavaScript o en frameworks modernos, podrás ofrecer una presentación profesional de datos financieros sin depender de bibliotecas externas. ¡Aprovecha esta API para llevar tus aplicaciones web al siguiente nivel!