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.