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