Formatta il numero per mostrare sempre 2 cifre decimali


783

Vorrei formattare i miei numeri per visualizzare sempre 2 cifre decimali, arrotondando dove applicabile.

Esempi:

number     display
------     -------
1          1.00
1.341      1.34
1.345      1.35

Ho usato questo:

parseFloat(num).toFixed(2);

Ma viene visualizzato 1come 1, piuttosto che 1.00.


2
Voglio dire se inserisco 1 non mostrerà il numero come 1.00, ma se inserisco 1.345 mostrerà 1,35
Varada,

1
Ho riformulato la tua domanda su ciò che credo stavi cercando. Per favore, assicurati di averti capito correttamente.
Drudge,

arrotondamento preciso con ie supporto. gist.github.com/ArminVieweg/28647e735aa6efaba401
TarranJones


Risposte:


1117
(Math.round(num * 100) / 100).toFixed(2);

Dimostrazione dal vivo

Si noti che arrotonderà al secondo decimale, quindi l'input 1.346tornerà 1.35.


6
@Kooilnc: OP desidera 1visualizzare come 1.00e 1.341visualizzare come 1.34.
Drudge,

49
Non è necessario utilizzare round () poiché toFixed () lo arrotonda.
Milan Babuškov,

27
toFixed () lo arrotonda ma non dimenticare che restituisce una stringa ... Quindi questo metodo è davvero utile solo per la visualizzazione. Se si desidera eseguire ulteriori calcoli matematici sul valore arrotondato, non utilizzare toFixed ().
Dodici

8
secondo MDN, Math.round non fornirà sempre risultati accurati a causa di errori di arrotondamento. Ho provato questo con 1.005, che dovrebbe arrotondare a 1.01, ma dà 1.00. Usa la mia risposta per una precisione costante: stackoverflow.com/a/34796988/3549440 .
Nate,

13
L'intera risposta potrebbe essere ridotta a (+num).toFixed(2). Mantiene anche il bug di arrotondamento nell'originale, vedi la risposta di Nate .
RobG

322
Number(1).toFixed(2);         // 1.00
Number(1.341).toFixed(2);     // 1.34
Number(1.345).toFixed(2);     // 1.34 NOTE: See andy's comment below.
Number(1.3450001).toFixed(2); // 1.35


1
L'ultima riga è falsa. Ho provato questo nella console di Chrome e `` Number (1.365) .toFixed (2) restituisce "1.37"
Andre

1
@Andre, Chrome 29.0.1547.57 mi dà 1.34per espressione Number(1.345).toFixed(2).
Drew Noakes,

1
toFixed esegue l' arrotondamento, che puoi vedere su quasi tutti i numeri di test.
andy,

40
L'invio accidentale dell'ultimo commento prima di finire .. 1.345è un esempio di un numero che non può essere archiviato esattamente in virgola mobile, quindi penso che il motivo per cui non si arrotonda come previsto, è che è effettivamente memorizzato come un numero leggermente meno di 1.345 e arrotonda per difetto. Se invece esegui il test con (1.34500001).toFixed(2)allora vedi che si arrotonda correttamente a1.35
andy

94

Questa risposta fallirà se value = 1.005.

Come soluzione migliore, il problema di arrotondamento può essere evitato usando i numeri rappresentati in notazione esponenziale:

Number(Math.round(1.005+'e2')+'e-2'); // 1.01

Codice più pulito come suggerito da @Kon e dall'autore originale:

Number(Math.round(parseFloat(value + 'e' + decimalPlaces)) + 'e-' + decimalPlaces)

È possibile aggiungere toFixed()alla fine per mantenere il punto decimale, ad esempio: 1.00ma si noti che tornerà come stringa.

Number(Math.round(parseFloat(value + 'e' + decimalPlaces)) + 'e-' + decimalPlaces).toFixed(decimalPlaces)

Credito: arrotondamento decimali in JavaScript


13
Sorprendentemente, tutti gli altri qui non sono riusciti a vedere che toFixedha quel problema di arrotondamento. La tua risposta dovrebbe essere quella accettata.
Armfoot,

1
Ho appena testato per vedere se fosse ancora così. hai ancora ragione per la versione 59.0.3071.115 di Chrome La tua soluzione verrà arrotondata per 1.005 (1.01) e arrotondata per 1.00499999 (1.00)
Artistan

jsfiddle.net/Artistan/qq895bnp/28 ci sono "volte" in cui toFixed funzionerà, ma è abbastanza incoerente. :)
Artistan,

surround Il numero in parseFloat è la stringa di ritorno
user889030

1
Questa è una risposta solida. Un paio di miglioramenti che mi vengono in mente: (1) VS Code (file TypeScript) non piace che Math.round () passi in una stringa. (2) Rendi dinamico il numero di cifre decimali (non codificato su 2). (3) toFixed () sembra non necessario. Quindi quello che mi è venuto in mente èNumber(Math.round(parseFloat(value + 'e' + decimalPlaces)) + 'e-' + decimalPlaces)
Kon

23
var num = new Number(14.12);
console.log(num.toPrecision(2));//outputs 14
console.log(num.toPrecision(3));//outputs 14.1
console.log(num.toPrecision(4));//outputs 14.12
console.log(num.toPrecision(5));//outputs 14.120

Ciò fornisce risultati imprevisti, se il tuo numero può essere 1.4, 23.654 e 0, quale precisione prenderesti?
shinzou,

2
Si noti che l'OP chiede "arrotondamento ove applicabile" . toPrecisionformatta il numero solo su un numero specifico di posizioni decimali, semplicemente tralasciando le posizioni ridondanti, ma non arrotondandole . Questo potrebbe essere molto utile, ovviamente, ma è importante capire la differenza.
Boaz - Ripristina Monica il

1
In realtà a Precisione fa il giro, secondo Mozilla. Test:(20.55).toPrecision(3) "20.6"
James L.

2
Se si desidera eliminare gli zeri finali , eseguirne il cast in un numero o virgola mobile dopo l'uso toFixed: const formattedVal = Number(val.toFixed(2));non utilizzare toPrecision, poiché conta i numeri non decimali quando si utilizza il parametro di precisione.
James L.,

17

Per un arrotondamento più accurato, creare questa funzione:

function round(value, decimals) {
    return Number(Math.round(value +'e'+ decimals) +'e-'+ decimals).toFixed(decimals);
}

e usalo per arrotondare al secondo decimale:

console.log("seeked to " + round(1.005, 2));
> 1.01

Grazie a Razu , questo articolo e al riferimento Math.round di MDN .


1
che ne dici di 1.0049999999999998934?
4esn0k,

1
Non va oltre i 2 dp
Stephen Adelakun,

1
jsfiddle.net/Artistan/qq895bnp testato, questo è l'unico metodo coerente che ho visto. Grazie.
Artistan,

17

Per i browser moderni, utilizzare toLocaleString:

var num = 1.345;
num.toLocaleString(undefined, { maximumFractionDigits: 2, minimumFractionDigits: 2 });

Specificare un tag locale come primo parametro per controllare il separatore decimale . Per un punto, utilizzare ad esempio le impostazioni locali inglesi inglesi:

num.toLocaleString("en-US", { maximumFractionDigits: 2, minimumFractionDigits: 2 });

che dà:

1.35

La maggior parte dei paesi in Europa utilizza una virgola come separatore decimale, quindi se ad esempio si utilizza la locale svedese / svedese:

num.toLocaleString("sv-SE", { maximumFractionDigits: 2, minimumFractionDigits: 2 });

darà:

1,35


Non sono sicuro del motivo per cui questo è downvoted, sembrava funzionare bene per me. Si prega di aggiungere un commento se si intende sottovalutare se qualcosa non va in questo!
John Culviner,

13

Risposta più semplice:

var num = 1.2353453;
num.toFixed(2); // 1.24

Esempio: http://jsfiddle.net/E2XU7/


11
Bene, toFixedè già stato suggerito in stackoverflow.com/a/13292833/218196 . Quali informazioni aggiuntive fornisce la tua domanda?
Felix Kling

quella risposta non include la funzionalità rotonda, la mia risposta include comunque.
macio.

8
Uh? È esattamente la stessa risposta. Chiamando toFixedun numero.
Felix Kling

1
Corretta, stessa funzione, ma il risultato di quella risposta è fuorviante, l'ho appena corretta esprimendo la funzionalità rotonda.
macio.

La domanda afferma: "... arrotondamento ove applicabile". La tua risposta non comporta arrotondamenti.
Chris,

12

Una soluzione molto più generica per arrotondare a N posti

function roundN(num,n){
  return parseFloat(Math.round(num * Math.pow(10, n)) /Math.pow(10,n)).toFixed(n);
}


console.log(roundN(1,2))
console.log(roundN(1.34,2))
console.log(roundN(1.35,2))
console.log(roundN(1.344,2))
console.log(roundN(1.345,2))
console.log(roundN(1.344,3))
console.log(roundN(1.345,3))
console.log(roundN(1.3444,3))
console.log(roundN(1.3455,3))

Output

1.00
1.34
1.35
1.34
1.35
1.344
1.345
1.344
1.346

1
Questa risposta ha esito negativo con alcuni numeri vicini a 0, roundN(-3.4028230607370965e+38,2)restituisce "-3.4028230607370965e+38"invece dell'atteso 0.00
Ferrybig

interessante @Ferrybig testerò i numeri che hai citato e penso a una soluzione alternativa, grazie per i test
PirateApp

1
Nota che il numero sopra menzionato non dovrebbe mostrare zero, ma un numero enorme invece, questo era solo un errore nel mio cervello. Ma non funziona ancora, dato che non mostra ancora 2 decimali
Ferrybig


9

Se stai già usando jQuery, puoi guardare usando il plugin jQuery Number Format .

Il plug-in può restituire numeri formattati come stringa, è possibile impostare decimali e migliaia di separatori e scegliere il numero di decimali da mostrare.

$.number( 123, 2 ); // Returns '123.00'

Puoi anche ottenere jQuery Number Format da GitHub .


11
È eccessivo usare un plugin "solo per avere una parte decimale a lunghezza fissa".
Lashae,

9
@Lashae, certo, se questo è tutto ciò che vuoi fare. L'ho pubblicato nel caso in cui l'OP o chiunque altro volesse anche le funzionalità extra fornite dal plugin.
Sam Sehnert,

se il poster della domanda avesse aggiunto il tag jQuery ovviamente;)
fullstacklife

7

È ciò che intendi?

function showAsFloat(num, n){
      return !isNaN(+num) ? (+num).toFixed(n || 2) : num;
}

document.querySelector('#result').textContent = 
    [
     'command                      | result',
     '-----------------------------------------------',
     'showAsFloat(1);              | ' + showAsFloat(1),
     'showAsFloat(1.314);          | ' + showAsFloat(1.314),
     'showAsFloat(\'notanumber\')    | ' + showAsFloat('notanumber'),
     'showAsFloat(\'23.44567\', 3)   | ' + showAsFloat('23.44567', 3),
     'showAsFloat(2456198, 5)      | ' + showAsFloat('2456198', 5),
     'showAsFloat(0);              | ' + showAsFloat(0)
    ].join('\n');
<pre id="result"></pre>


6

Converti un numero in una stringa, mantenendo solo due decimali:

var num = 5.56789;
var n = num.toFixed(2);

Il risultato di n sarà:

5.57

4

Stai cercando un pavimento?

var num = 1.42482;
var num2 = 1;
var fnum = Math.floor(num).toFixed(2);
var fnum2 = Math.floor(num2).toFixed(2);
alert(fnum + " and " + fnum2); //both values will be 1.00

4
Non penso che voglia arrotondare al numero intero più vicino.
Drudge,

sì, non ero sicuro dalla descrizione, ma lo stavo solo lanciando là fuori in caso di
morte

3
function currencyFormat (num) {
    return "$" + num.toFixed(2).replace(/(\d)(?=(\d{3})+(?!\d))/g, "$1,")
}

console.info(currencyFormat(2665));   // $2,665.00
console.info(currencyFormat(102665)); // $102,665.00

3

Ecco anche una funzione generica che può formattare in qualsiasi numero di cifre decimali:

function numberFormat(val, decimalPlaces) {

    var multiplier = Math.pow(10, decimalPlaces);
    return (Math.round(val * multiplier) / multiplier).toFixed(decimalPlaces);
}

3

Dove è richiesta una formattazione specifica, è necessario scrivere la propria routine o utilizzare una funzione di libreria che fa ciò di cui si ha bisogno. La funzionalità ECMAScript di base è in genere insufficiente per la visualizzazione di numeri formattati.

Una spiegazione approfondita dell'arrotondamento e della formattazione è qui: http://www.merlyn.demon.co.uk/js-round.htm#RiJ

Come regola generale, l'arrotondamento e la formattazione devono essere eseguiti solo come ultimo passaggio prima dell'output. Farlo prima potrebbe introdurre errori inaspettatamente grandi e distruggere la formattazione.


Ci sono momenti in cui scuoto la testa per mia scelta e mi coinvolgo così profondamente negli ultimi tempi dell'intera piattaforma JS / Ecma. :( "Dove è richiesta una formattazione specifica, dovresti scrivere la tua routine o utilizzare una funzione di libreria che fa ciò di cui hai bisogno. La funzionalità ECMAScript di base di solito non è sufficiente per visualizzare numeri formattati." Che affermazione asinina - non che tu l'abbia fatta, ma perché questo fatto esiste. Solo triste. Sali sulla palla, Javascript! :)
ChrisH il

2

function number_format(string,decimals=2,decimal=',',thousands='.',pre='R$ ',pos=' Reais'){
  var numbers = string.toString().match(/\d+/g).join([]);
  numbers = numbers.padStart(decimals+1, "0");
  var splitNumbers = numbers.split("").reverse();
  var mask = '';
  splitNumbers.forEach(function(d,i){
    if (i == decimals) { mask = decimal + mask; }
    if (i>(decimals+1) && ((i-2)%(decimals+1))==0) { mask = thousands + mask; }
    mask = d + mask;
  });
  return pre + mask + pos;
}
var element = document.getElementById("format");
var money= number_format("10987654321",2,',','.');
element.innerHTML = money;
#format{
display:inline-block;
padding:10px;
border:1px solid #ddd;
background:#f5f5f5;
}
<div id='format'>Test 123456789</div>


2

Ho appena incontrato questo uno dei thread più lunghi, di seguito è la mia soluzione:

parseFloat(Math.round((parseFloat(num * 100)).toFixed(2)) / 100 ).toFixed(2)

Fammi sapere se qualcuno può fare un buco


2


2
Questo pezzo di codice è sufficiente per soddisfare le tue esigenze parseFloat(num.toFixed(2))
kva il

1

Non ci stai dando l'intero quadro.

javascript:alert(parseFloat(1).toFixed(2))mostra 1,00 nei miei browser quando lo incollo int0 nella barra degli indirizzi. Tuttavia, se gli fai qualcosa in seguito, tornerà.

var num = 2
document.getElementById('spanId').innerHTML=(parseFloat(num).toFixed(2)-1)


shows 1 and not 1.00

Funziona in FF 50, Chrome 49 e IE 8
Florian Straub il

1
var quantity = 12;

var import1 = 12.55;

var total = quantity * import1;

var answer = parseFloat(total).toFixed(2);

document.write(answer);

1

Ho dovuto decidere tra le conversioni parseFloat () e Number () prima di poter effettuare la chiamata a Fix (). Ecco un esempio di un numero che formatta l'input dell'utente post-acquisizione.

HTML:

<input type="number" class="dec-number" min="0" step="0.01" />

Gestore di eventi:

$('.dec-number').on('change', function () {
     const value = $(this).val();
     $(this).val(value.toFixed(2));
});

Il codice precedente genererà un'eccezione TypeError. Si noti che sebbene il tipo di input html sia "numero", l'input dell'utente è in realtà un tipo di dati "stringa". Tuttavia, la funzione toFixed () può essere invocata solo su un oggetto che è un numero.

Il mio codice finale sarebbe simile al seguente:

$('.dec-number').on('change', function () {
     const value = Number($(this).val());
     $(this).val(value.toFixed(2));
});

Il motivo per cui preferisco eseguire il cast con Number () vs. parseFloat () è perché non devo eseguire una convalida aggiuntiva né per una stringa di input vuota, né per un valore NaN. La funzione Number () gestirà automaticamente una stringa vuota e la convertirà a zero.


0

Mi piace:

var num = 12.749;
parseFloat((Math.round(num * 100) / 100).toFixed(2)); // 123.75

Arrotonda il numero con 2 punti decimali, quindi assicurati di analizzarlo parseFloat() per restituire Numero, non Stringa a meno che non ti interessi se è Stringa o Numero.


Immagino che se lo scopo fosse quello di visualizzare con 2 decimali di precisione, l'analisi del float lo rovinerebbe. Ad esempioparseFloat("1.00") // 1
Stijn de Witt,

0

Estendi l' oggetto Math con metodo di precisione

Object.defineProperty(Math, 'precision',{
   value: function (value,precision,type){
             var v = parseFloat(value),
                 p = Math.max(precision,0)||0,
                 t = type||'round';
              return (Math[t](v*Math.pow(10,p))/Math.pow(10,p)).toFixed(p);
          }
    });

console.log(
    Math.precision(3.1,3), // round 3 digits 
    Math.precision(0.12345,2,'ceil'), // ceil 2 digits
    Math.precision(1.1) // integer part
)



0

ecco un'altra soluzione per arrotondare solo usando floor, ovvero assicurarsi che l'importo calcolato non sia maggiore dell'importo originale (a volte necessario per le transazioni):

Math.floor(num* 100 )/100;

0

Puoi provare questo codice:

    function FormatNumber(number, numberOfDigits = 2) {
        try {
            return new Intl.NumberFormat('en-US').format(parseFloat(number).toFixed(2));
        } catch (error) {
            return 0;
        }
    }

    var test1 = FormatNumber('1000000.4444');
    alert(test1); // 1,000,000.44

    var test2 = FormatNumber(100000000000.55555555, 4);
    alert(test2); // 100,000,000,000.56

0

Prova sotto il codice:

function numberWithCommas(number) { 

   var newval = parseFloat(Math.round(number * 100) / 100).toFixed(2);

   return newval.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",");
}


-3

Ecco come risolvo il mio problema:

parseFloat(parseFloat(floatString).toFixed(2));
Utilizzando il nostro sito, riconosci di aver letto e compreso le nostre Informativa sui cookie e Informativa sulla privacy.
Licensed under cc by-sa 3.0 with attribution required.