JavaScript, das einen Gleitkommawert mit 2 Dezimalstellen anzeigt


316

Ich wollte eine Zahl mit 2 Dezimalstellen anzeigen.

Ich dachte, ich könnte toPrecision(2)in JavaScript verwenden.

Wenn die Nummer jedoch ist 0.05, bekomme ich 0.0500. Ich möchte lieber, dass es gleich bleibt.

Sehen Sie es auf JSbin .

Was ist der beste Weg, dies zu tun?

Ich kann mir vorstellen, ein paar Lösungen zu programmieren, aber ich würde mir vorstellen (ich hoffe), dass so etwas eingebaut ist?

Antworten:


560
float_num.toFixed(2);

Hinweis:toFixed() Wird bei Bedarf gerundet oder mit Nullen aufgefüllt, um die angegebene Länge zu erreichen.


61
Aber es gibt String zurück, nicht float!
Anwar

38
Der Autor der Frage möchte es "anzeigen", damit eine Zeichenfolge perfekt ist
Christophe Marois

7
Und Sie können immer parseFloat (float_num.toFixed (2)) verwenden, um den String zurück in float zu konvertieren, während nur zwei Dezimalstellen beibehalten werden.
Hankrecords

3
@anwar Sie können einen Schwimmer nicht zuverlässig umrunden (wahrscheinlich können Sie einen Schwimmer überhaupt umrunden) - Sie erhalten so etwas wie 0.0500 oder sogar 0.0500000000001. Siehe float-point-gui.de
JMC

2
@Hankrecords was du gesagt hast ist nicht wahr. Wenn ich '43 .01 'habe und parseFloat, dann bekomme ich 43.01 ABER wenn ich '43 .10' habe, bekomme ich 43.1: D nicht was ich will.
Lucian Tarna

50

Sie könnten es mit der toFixedFunktion tun , aber es ist fehlerhaft im IE . Wenn Sie eine zuverlässige Lösung wünschen, sehen Sie sich meine Antwort hier an .


26
Technologie sollte entwickelt werden, anstatt sich an IE anzupassen ... (übrigens in Knoten js float_num.toFixed(2);funktioniert gut)
fider


14

Ich weiß nicht, wie ich zu dieser Frage gekommen bin, aber selbst wenn dies viele Jahre her ist, möchte ich eine schnelle und einfache Methode hinzufügen, die ich befolge und die mich nie im Stich gelassen hat:

var num = response_from_a_function_or_something();

var fixedNum = parseFloat(num).toFixed( 2 );

1
Warum parseFloat()dort? Es sollte nur verwendet werden, wenn die Nummer aus einer Zeichenfolge stammt.
Alex

3
In einigen Fällen, in denen ich mit jquery einen Attributwert "data-" von einem Element erhalte, wird ein Fehler ausgegeben, wenn ich nur toFixed verwende. parseFloat behebt das Problem.
Panos

2
Ja, das habe ich oben gemeint, wenn es von einer Schnur kam . Aber es immer zu benutzen ist ein schlechter Rat.
Alex


8

number.parseFloat(2) funktioniert, gibt aber eine Zeichenfolge zurück.

Wenn Sie es als Zahlentyp beibehalten möchten, können Sie Folgendes verwenden:

Math.round(number * 100) / 100


4

Sie könnten versuchen, zu mischen Number()und toFixed().

Lassen Sie Ihre Zielnummer in eine schöne Zeichenfolge mit X-Ziffern konvertieren und konvertieren Sie die formatierte Zeichenfolge in eine Nummer.

Number( (myVar).toFixed(2) )


Siehe Beispiel unten:

var myNumber = 5.01;
var multiplier = 5;
$('#actionButton').on('click', function() {
  $('#message').text( myNumber * multiplier );
});

$('#actionButton2').on('click', function() {
  $('#message').text( Number( (myNumber * multiplier).toFixed(2) ) );
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<button id="actionButton">Weird numbers</button>
<button id="actionButton2">Nice numbers</button>

<div id="message"></div>


Vielen Dank für Ihre nette Referenz.
Arman H

1

Die toFixed()Methode formatiert eine Zahl in Festkommanotation.

und hier ist die Syntax

numObj.toFixed([digits])

Das Argument digits ist optional und standardmäßig 0. Der Rückgabetyp ist string not number. Sie können es aber mit in Zahlen umwandeln

numObj.toFixed([digits]) * 1

Es kann auch Ausnahmen auslösen wie TypeError:RangeError

Hier finden Sie alle Details und die Kompatibilität im Browser.


1
let a = 0.0500
a.toFixed(2);

//output
0.05

-1

Ich habe diese Funktion gemacht. Es funktioniert gut, gibt aber einen String zurück.

function show_float_val(val,upto = 2){
  var val = parseFloat(val);
  return val.toFixed(upto);
}
Durch die Nutzung unserer Website bestätigen Sie, dass Sie unsere Cookie-Richtlinie und Datenschutzrichtlinie gelesen und verstanden haben.
Licensed under cc by-sa 3.0 with attribution required.