javascript

Formatear dinero en JavaScript

Hoy te enseñaré cómo formatear dinero con JavaScript, o mejor dicho, formatear un número para mostrarlo como dinero o moneda.

Normalmente usamos toFixed() pero hoy te enseñaré algo más elegante que incluso podría ser una buena alternativa a la maravillosa función number_format de PHP.

Recuerda que como es JavaScript vamos a poder usar esto del lado del cliente así como del lado del servidor con Node.js.

Formateando número

Para formatear un número como dinero en JS podemos invocar al método toLocaleString del número en sí. Esta función recibe el locale para el cual queremos formatear el dinero.

La sintaxis básica es:

número_formateado = número.toLocaleString(locale)

Aunque hay varias opciones para pasarle a la función, esa es la sintaxis básica. Ahora un ejemplo.

Formato de dinero en JavaScript

En cada lugar hay diferentes formatos. En México se usa la coma para separar los miles, y el punto para los decimales. Así que algo como 3500.51 se convierte en $3,500.51.

El único formato que encontré para esto es el del locale en inglés (en) y funciona así:

// https://parzibyte.me/blog
const numero = 3500.51;
const formateado = numero.toLocaleString("en");
console.log(formateado);
// Salida: 3,500.51

Obviamente para otros países puede que nos convenga mejor otra opción, para ese caso puedes ver la documentación en MDN.

Para este caso lo único que faltaría sería agregar el $ o el MXN al inicio del número formateado y lo tendríamos formateado como dinero correctamente.

Agregando tipo de moneda

Igualmente podemos dejar que el formateador se encargue de agregar el símbolo de la moneda. Para ello pasamos las opciones de style y currency al invocar a toLocaleString así:

// https://parzibyte.me/blog
const numero = 3500.51;
const formateado = numero.toLocaleString("en", {
 style: "currency",
 currency: "MXN"
});
console.log(formateado);
// Salida: MX$3,500.51

En este caso como puedes ver se agrega MX$ al inicio. Si me lo preguntas, este formato me gusta más.

Y con esto podemos hacer más cosas, por ejemplo formatear en euros:

// https://parzibyte.me/blog
const numero = 3500.51;
const formateado = numero.toLocaleString("en", {
 style: "currency",
 currency: "EUR"
});
console.log(formateado);
// Salida: €3,500.51

Formato a varios números

Formatear dinero en JavaScript

Para terminar este post en donde vemos cómo formatear dinero con JavaScript veamos qué pasa si queremos formatear varios números.

Para obtener el mejor rendimiento es mejor crear un formateador con las opciones y después invocar al método format, así:

// https://parzibyte.me/blog
const formateador = new Intl.NumberFormat("en", { style: "currency", "currency": "MXN" });
const numero = 1234567890.10;
const formateado = formateador.format(numero);
console.log(formateado);
// Salida: MX$1,234,567,890.10

Esto ayuda tanto a la simplicidad del código como al rendimiento del mismo, pues primero creamos un formateador y después formateamos cuantos números sean necesarios usando ese formato.

Si te gustan estas tecnologías te invito a ver más sobre JavaScript en mi blog.

Como te dije anteriormente, puedes formatear con varios formatos de moneda y es una alternativa a number_format de PHP.

Estoy aquí para ayudarte 🤝💻


Estoy aquí para ayudarte en todo lo que necesites. Si requieres alguna modificación en lo presentado en este post, deseas asistencia con tu tarea, proyecto o precisas desarrollar un software a medida, no dudes en contactarme. Estoy comprometido a brindarte el apoyo necesario para que logres tus objetivos. Mi correo es parzibyte(arroba)gmail.com, estoy como@parzibyte en Telegram o en mi página de contacto

No te pierdas ninguno de mis posts 🚀🔔

Suscríbete a mi canal de Telegram para recibir una notificación cuando escriba un nuevo tutorial de programación.
parzibyte

Programador freelancer listo para trabajar contigo. Aplicaciones web, móviles y de escritorio. PHP, Java, Go, Python, JavaScript, Kotlin y más :) https://parzibyte.me/blog/software-creado-por-parzibyte/

Entradas recientes

Desplegar PWA creada con Vue 3, Vite y SQLite3 en Apache

Ya te enseñé cómo convertir una aplicación web de Vue 3 en una PWA. Al…

3 días hace

Arquitectura para wasm con Go, Vue 3, Pinia y Vite

En este artículo voy a documentar la arquitectura que yo utilizo al trabajar con WebAssembly…

3 días hace

Vue 3 y Vite: crear PWA (Progressive Web App)

En un artículo anterior te enseñé a crear un PWA. Al final, cualquier aplicación que…

3 días hace

Errores de Comlink y algunas soluciones

Al usar Comlink para trabajar con los workers usando JavaScript me han aparecido algunos errores…

3 días hace

Esperar promesa para inicializar Store de Pinia con Vue 3

En este artículo te voy a enseñar cómo usar un "top level await" esperando a…

3 días hace

Solución: Apache – Server unable to read htaccess file

Ayer estaba editando unos archivos que son servidos con el servidor Apache y al visitarlos…

3 días hace

Esta web usa cookies.