Fabio Donatantonio

Resta connesso

Software Developer / Adjunct Professor

Number_format Javascript

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.

Fabio Donatantonio

Fabio Donatantonio. Analista e sviluppatore full-stack di applicazioni web in linguaggio PHP. Professore a Contratto per le cattedre di Fondamenti di Informatica e Archivistica Digitale presso Università degli Studi eCampus. Dal 2008 curatore del sito www.donatantonio.net, da sempre appassionato di programmazione, mare, sigari e... musica.

Leave a reply

Your email address will not be published. Required fields are marked *

 

Didattica

Università degli Studi eCampus
Data Evento
09/02/2021
14:30
Esame Archivistica Digitale e Informatica per le Scienze Umane - Cds Letteratura, Lingua e Cultura Italiana - Lettere
09/02/2021
14:30
Esame Introduzione all'Archivistica Digitale e all'Informatica per le Scienze Umane - Cds Letteratura, Arte, Musica e Spettacolo - Lettere
09/02/2021
17:30
Esame Abilità Informatiche e Telematiche - Cds Design e Discipline della Moda - Lettere
09/02/2021
17:30
Esame Abilità Informatiche e Telematiche - Cds Letteratura, Arte, Musica e Spettacolo - Lettere
Risorse
Guida HTML/CSS per principianti (link)
Introduzione agli ipertesti (link)
Esercizi guidati in Java (link)
Intelligenza artificiale (link)
Libri
Fondamenti di Informatica (2011) (link)
Informatica per le Scienze Umane (2011) (link)
Fondamenti di Informatica (2014) (link)
Pagina Docente
uniecampus.it - Scheda Docente (link)
Contatti
fabio.donatantonio[at]uniecampus.it

JWhisper, sviluppato presso il Dipartimento di Informatica Applicata dell'Università degli Studi di Salerno:

Stay Connected

Twitter

Le mie foto

Foto di Fabio Donatantonio
×