Anteriormente vimos un filtro de Vue.JS para transformar un número a moneda; es decir, de un número entero o flotante, obtener su representación legible para el ser humano.
Pues bien, no todos programamos en Vue, y la instalación de la librería citada es un poco compleja si queremos cosas simples, así que me di a la tarea de crear mi propia función para formatear dinero en Javascript.
Es una función que convierte un flotante a moneda, escrita en JavaScript puro. Se puede configurar de varias maneras para poner un separador de miles personalizado, un símbolo de acuerdo al país, etcétera.
Nota: también puedes usar Intl.
Función para formatear dinero en JavaScript
La función que presento usa funciones flecha, plantillas de cadena y let y const para usar las últimas características del lenguaje. Recibe el número que se va a formatear como moneda, y devuelve una cadena con el número formateado como dinero.
Adicionalmente recibe un objeto de configuraciones en donde se pone el separador de miles, el símbolo y otras cosas. El código fuente y su uso es el siguiente:
/**
* Función que convierte un número a su representación
* monetaria en JavaScript, por ejemplo, el número
* 123456 se convierte en $ 123, 456.00
*
* @author parzibyte
*/
const aMoneda = (numero, opciones) => {
// Valores por defecto
opciones = opciones || {};
opciones.simbolo = opciones.simbolo || "$";
opciones.separadorDecimal = opciones.separadorDecimal || ".";
opciones.separadorMiles = opciones.separadorMiles || ",";
opciones.numeroDeDecimales = opciones.numeroDeDecimales >= 0 ? opciones.numeroDeDecimales : 2;
opciones.posicionSimbolo = opciones.posicionSimbolo || "i";
const CIFRAS_MILES = 3;
// Redondear y convertir a cadena
let numeroComoCadena = numero.toFixed(opciones.numeroDeDecimales);
// Comenzar desde la izquierda del separador o desde el final de la cadena si no se proporciona
let posicionDelSeparador = numeroComoCadena.indexOf(opciones.separadorDecimal);
if (posicionDelSeparador === -1) posicionDelSeparador = numeroComoCadena.length;
let formateadoSinDecimales = "", indice = posicionDelSeparador;
// Ir cortando desde la derecha de 3 en 3, y concatenar en una nueva cadena
while (indice >= 0) {
let limiteInferior = indice - CIFRAS_MILES;
// Agregar separador si cortamos más de 3
formateadoSinDecimales = (limiteInferior > 0 ? opciones.separadorMiles : "") + numeroComoCadena.substring(limiteInferior, indice) + formateadoSinDecimales;
indice -= CIFRAS_MILES;
}
let formateadoSinSimbolo = `${formateadoSinDecimales}${numeroComoCadena.substr(posicionDelSeparador, opciones.numeroDeDecimales + 1)}`;
return opciones.posicionSimbolo === "i" ? opciones.simbolo + formateadoSinSimbolo : formateadoSinSimbolo + opciones.simbolo;
};
// Probar
const opcionesPesosMexicanos = {
numeroDeDecimales: 2,
separadorDecimal: ".",
separadorMiles: ",",
simbolo: "$ ", // Con un espacio, ya que la función no agrega espacios
posicionSimbolo: "i", // i = izquierda, d = derecha
},
opcionesDolares = {
numeroDeDecimales: 2,
separadorDecimal: ".",
separadorMiles: ",",
simbolo: " USD", // Con un espacio, ya que la función no agrega espacios
posicionSimbolo: "d", // i = izquierda, d = derecha
};
const numeros = [1.652, 12, 123, 1234, 12345.335, 123456, 1234567, 12345678, 123456789, 1234567890, 12345678901, 123456789012, 586.512];
console.log("Probando con pesos...");
numeros.forEach(numero => console.log(`Con ${numero} sale ${aMoneda(numero, opcionesPesosMexicanos)}`));
console.log("Probando con dólares...");
numeros.forEach(numero => console.log(`Con ${numero} sale ${aMoneda(numero, opcionesDolares)}`));
En el ejemplo muestro (así me imagino que es, si no es así, de todos modos sirve para ejemplificar) cómo formatear dólares y pesos mexicanos. Si no se proporciona el argumento o no
Usar función
Simplemente tienes que incluir a la función y después podrás formatear dinero con JavaScript desde cualquier lugar o framework, gracias a que está escrito en JS puro; sin librerías adicionales.
Arriba mostré cómo llamar a la función; puedes modificarla a tu gusto y necesidades.
Por cierto, como lo dije, el segundo parámetro es opcional. La función puede llamarse así:
aMoneda(123);
Sin el objeto de configuraciones, tomará los que tiene por defecto. Para alinear el separador utiliza la letra i o la letra d.
Descargar ejemplo
Si quieres, puedes probar el ejemplo de código. Para ello, ejecuta el código en la consola del navegador o instala Node, navega hasta donde tengas el archivo y ejecuta node archivo.js dependiendo del nombre del archivo.