Chi conosce e sviluppa quotidianamente in linguaggio PHP conoscerà di sicuro la funzione number_format che permette, appunto, di formattare un valore numerico impostando il numero di decimali da visualizzare e i caratteri di separazione per le migliaia e per la parte decimale.
Putroppo, come spesso capita, in linguaggio Javascript non esiste una funzione simile pronta all’uso.
In quest’articolo svilupperemo la versione Javascript della funzione number_format.
Enunciamo innanzitutto la sintassi e i parametri che tale funzione accetta:

number_format(valore,decimali,separatore_decimali,separatore_migliaia)

se ad esempio volessimo formattare il numero “1250.784” impostando 2 cifre decimali, la virgola come separatore dei decimali e il punto per le migliaia, invocheremo la funzione nel seguente modo:

number_format(1250.784,2,',','.');

// ottenendo come output 1.250,78

Vediamo subito il codice della funzione number_format. Ricordo che in fondo all’articolo sono presenti i link per provare il codice e scaricarlo.

function toFixedFix(n, precisione) {
    // Funzione per arrotondare valore
    var k = Math.pow(10, precisione);            
    return '' + Math.round(n * k) / k;
}

function number_format(numero, decimali, dec_separatore, mig_separatore){
    // Elimino i caratteri che non sono numeri (lascio il segno meno e il punto)
    numero = (numero).replace(/[^0-9\.\-]?/gi,"");
    // Controllo se valore numerico
    var n = 0;
    if(isFinite(+numero)){
        n=numero;
    }
    // Controllo se i decimali sono accettabili
    var precisione = 0;
    if(isFinite(+decimali) && decimali>-1){
        precisione = decimali;
    }
    // Recupero caratteri separatori
    var separatore = '.';
    if(typeof mig_separatore != 'undefined'){
        separatore = mig_separatore;
    }
    var dec = ',';
    if(typeof dec_separatore != 'undefined'){
        var dec = dec_separatore;     
    }
    
    // Arrotondo il valore se necessario - Utilizzo funzione toFixedFix
    var s = '';
    if(precisione!=0){
        s = toFixedFix(n, precisione);    
    }else{
        s = '' + Math.round(n);
    }
    // Taglio il valore in parte intera e parte decimale
    s = s.split('.');
    // Aggiungo il separatore delle migliaia - ogni 3 numeri sulla parte intera
    if (s[0].length > 3) {        
        s[0] = s[0].replace(/\B(?=(?:\d{3})+(?!\d))/g, separatore);
    }
    // Formatto la parte decimale - aggiungo degli 0 se necessari
    if ((s[1] || '').length < precisione) {
        s[1] = s[1] || '';
        s[1] += new Array(precisione - s[1].length + 1).join('0');    
    }
    // Aggiungo parte decimale a parte intera - separati da separatore decimali
    return s.join(dec);
}

Il codice non è difficile da comprendere ed è grossomodo commentato. Vediamo però i passi fondamentali che esso compie:

1. Definisco una semplice funzione “toFixedFix” di supporto che arrotonda/tronca in maniera opportuna un valore numerico.
2. All’inizio della funzione number_format pulisco innanzitutto il valore da formattare.
3. Effettuo alcuni semplici controlli: se il valore da formattare e il numero di cifre decimali sono numerici.
4. Chiamo la funzione toFixedFix per arrotondare/troncare il valore.
5. Taglio il valore (ora parzialmente formattato) in parte intera e parte decimale.
6. Aggiungo il separatore delle migliaia (ogni 3 cifre) alla parte intera.
7. Formatto la parte decimale aggiungendo degli zeri se necesssario.
8. Concateno la parte intera con quella decimale.

A parte l’utilizzo della funzione toFixedFix, creata per l’occasione, nel codice utilizziamo alcune funzioni base del linguaggio, tra cui:
replace(…) per sostituire i caratteri non accettabili
isFinite(numero) per controllare se il valore è numerico
split(.) per tagliare il numero in parte intera e parte decimale
join() per unire parte decimale a parte intera

Logicamente, come è mio solito sottolineare, questa è solo una delle possibile soluzione della funzione number_format.

Cliccando qui è possibile vedere in azione il codice.

Cliccando qui è possibile scaricare il codice.