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í:

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.

Nota: puedes probar el ejemplo aquí.

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í:

En este caso como puedes ver se agrega MX$ al inicio. Si me lo preguntas, este formato me gusta más. Si gustas puedes probarlo en línea aquí.

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

Formato a varios números

Formatear dinero en JavaScript

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í:

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 quieres puedes probar el código en este enlace. Y 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 disponible para trabajar en tu proyecto o realizar tu tarea pendiente, no dudes en ponerte en contacto conmigo.
Si el post fue de tu agrado muestra tu apoyo compartiéndolo, suscribiéndote al blog, siguiéndome o realizando una donación.

Suscribir por correo

Ingresa tu correo y recibirás mis últimas entradas sobre programación, open source, bases de datos y todo lo relacionado con informática

Únete a otros 1,477 suscriptores


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/

0 Comentarios

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

A %d blogueros les gusta esto: