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.
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.
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.
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
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.
Ya te enseñé cómo convertir una aplicación web de Vue 3 en una PWA. Al…
En este artículo voy a documentar la arquitectura que yo utilizo al trabajar con WebAssembly…
En un artículo anterior te enseñé a crear un PWA. Al final, cualquier aplicación que…
Al usar Comlink para trabajar con los workers usando JavaScript me han aparecido algunos errores…
En este artículo te voy a enseñar cómo usar un "top level await" esperando a…
Ayer estaba editando unos archivos que son servidos con el servidor Apache y al visitarlos…
Esta web usa cookies.