Formatear números

Este script se encarga de recibir un valor numérico en el formato usado por javascript y lo pasa a un formato más legible, con separadores se miles y decimales.

Solución

<script>

//Objeto oNumero

function Numero(numero){

   //Propiedades

   this.valor = numero || 0;

   this.dec = -1;

   //Métodos

   this.formato = numFormat;

   this.ponValor = ponValor;

   //Definición de los métodos

   function ponValor(cad) {

     if (cad =='-' || cad=='+' || cad.length ==0 ) return

     if (cad.indexOf('.') >=0){

        this.valor = parseFloat(cad);

       }

    else {

        this.valor = parseInt(cad);

       }

   }

function numFormat(dec, miles){

    let num = this.valor, signo=3, expr;

    let cad = ""+this.valor;

    let ceros = "", pos, pdec, i;

    for (i=0; i < dec; i++){

        ceros += '0';

     }

 pos = cad.indexOf('.')

 if (pos < 0){

    cad = cad+"."+ceros;

  }

else

    {

    pdec = cad.length - pos -1;

    if (pdec <= dec)

        {

        for (i=0; i< (dec-pdec); i++)

            cad += '0';

        }

    else

        {

        num = num*Math.pow(10, dec);

        num = Math.round(num);

        num = num/Math.pow(10, dec);

        cad = new String(num);

        }

    }

pos = cad.indexOf('.')

if (pos < 0) pos = cad.lentgh

if (cad.substr(0,1)== '-' || cad.substr(0,1) == '+')

       signo = 4;

if (miles && pos > signo){

    do{

        expr = /([+-]?\d)(\d{3}[\.\,]\d*)/

        cad.match(expr)

        cad = cad.replace(expr, '$1,$2');

        }

    while (cad.indexOf(',') > signo);

   }

    if (dec<0) cad = cad.replace(/\./,'')

        return cad;

}

}//Fin del objeto oNumero:

</script>

<body>

<div id="res"></div>

<script>

  let numero = new Numero(12345);

  let res = document.getElementById('res');

  var vtxt ='';

  vtxt += "El número: " + numero.valor+'<br>';

  vtxt += "Formateado queda: ";

  vtxt += numero.formato(2, true);

  res.innerHTML = vtxt;

</script>

</body>

Explicación

En muchas ocasiones hemos necesitado formatear un número para qe se presente en pantalla con un cierto número de decimales o con los separadores de miles. Este objeto número permite hacer esto.

Vamos a usar un objeto al que llamo  Numero con dos propiedades y dos métodos.

Las propiedades son valor y dec. La primera es donde se almacena el valor numérico propiamente dicho, mientras que la segunda se usa para indicar que el número tiene posiciones decimales.

Los métodos son: ponValor() y formato(). El primero sencillamente pone el valor numérico partiendo de una cadena, mientras el segundo coloca los puntos decimales y los separadores de miles, para ello necesita dos argumentos: uno indicando el número de decimales que deseamos visualizar y otro para indicar si queremos que aparezcan los separadores de miles.

Como lo uso

 Cuando muestres la página con este código en pantalla el explorador te mostrará:

El número: 12345
Formateado queda: 12,345.00

Pues le hemos indicado que formatee el número 12345 con 2 decimales y separador de miles.