Kommazahlen in Javascript und Bildschirmausgabe

[kastbgjh]

Hallo!

Wie kann ich mit Kommazahlen, die die Form x,xx haben in Javascript rechnen, und wie gebe ich ein Ergebnis auf dem Bildschirm aus?

Gruss,
kastbgjh

[Benne]

Sers,

Wie kann ich mit Kommazahlen, die die Form x,xx haben in Javascript rechnen, und wie gebe ich ein Ergebnis auf dem Bildschirm aus?

beispiel:

<script type="text/javascript" language="JavaScript">
<!--
  var zahl1 = 5.12;
  var zahl2 = 3.75;
  document.write(zahl1*zahl2);
//-->
</script>

Hoffe, dass das hilft

Gruß,
Benne

[Benne]

Sers,

Wie kann ich mit Kommazahlen, die die Form x,xx haben in Javascript rechnen, und wie gebe ich ein Ergebnis auf dem Bildschirm aus?

sorry, hab bei deinem Posting was überlesen ;)
aber sonst würde ich bei dem String x,xx einfach das , durch einen . ersetzen lassen!

Gruß,
Benne

[sschumann]

Wie kann ich mit Kommazahlen, die die Form x,xx haben in Javascript rechnen

Per String-Methoden in ein vernünftiges Format bringen und einen parseFloat() anwenden. Bastel Dir doch ein Set FormConverter und mach Prototypes draus...

[Carsten]

Per String-Methoden in ein vernünftiges Format bringen und einen parseFloat() anwenden. Bastel Dir doch ein Set FormConverter und mach Prototypes draus...

Du sollts ihm helfen, nicht verwirren :))

[sschumann]

Du sollts ihm helfen, nicht verwirren :))

Empfinde das eigentlich als "alle Informationen auf kleinstem Raum" :)

[Carsten]

Empfinde das eigentlich als "alle Informationen auf kleinstem Raum" :)

Oder so, ja :)

[Karsten Spin]

Hallo kastbgjh!

Ich arbeite persönlich mit PHP, MySQL , HTML und JavaScript, so dass mein Beitrag darauf basiert (aber dennoch allgemein gültig ist). Meine Antwort auf deine Frage baue ich hier zunächst grundlegend auf , beziehe mich jedoch ausführlich innerhalb meiner Antwort auf dein Problem und hoffe, dass dir so jetzt und für deine zukünftigen Projekte etwas weitergeholfen ist.

Wenn du mit Daten bzw. Preisen, wie ich in deinem Fall vermute, z.B. aus Datenbanken in JavaScript (JScript) Berechnungen ausführen willst, dann musst du diese Werte zunächst an JScript übergeben. Wenn du z.B. den Wert einer PHP-Variabel an JScript übergeben willst, dann sieht dieser Befehl wie folgt in JScript aus:

var JScriptVariabel = '$phpVariabel';

Anders ist dies bei aktiven Veränderungen des Variabelenwerts durch den User über ein HTML-Formelement (z.B. Button oder Input). Hier arbeitet man am besten mit Event-Handlern wie onClick oder onChange, die dann eine JScript-Funktion aufrufen:

<INPUT type='text' maxlength='10' name='preis' value='$phpVariable'  onChange='neuerPreis(this.form, 0)'>

Die entsprechende JScript-Funktion erhält also die Inhalte der HTML-Formelemente bzw. des aktiven Formulars und muss daher eine Übergabevariabel hierfür aufweisen in meinem Beispiel lautet diese 'formElement'. Ferner sollte man der Funktion noch mitteilen, welchen Index das zu bearbeitende bzw. zu aktualisierende Formelement trägt (z.B. 0)  die Funktion benötigt also auch hierfür eine Übergabevariabel, im Beispiel ist dies 'b'. Die JScript-Funktionsdeklarierung sieht daher wie folgt aus:

function neuerPreis(formElement, b)  // Funktionsdeklaration mit Übergabevariabeln
 {
     var preis = formElement[b].value;      // belege JscriptVariabel mit Wert des Formelement mit dem Index b

(... Berechnung neuer Ausgabewerte ...)
 }

Ist die Übergabe des Variabeleninhalte an JScript so erfolgt, hat man es mit einem anderen Problem zu tun: JScript arbeitet nur mit Kommazahlen (sog. Floats), worin als Komma der Punkt verwendet wird. Bei allen anderen Kommata werden die Werte der Variable als String interpretiert und es kann somit nicht mit ihnen gerechnet werden. Der Interpreter gibt dann die Fehlermeldung NaN (Not a Number) aus. Also, wie bekomme ich z.B. ein Komma aus dem Ausdruck heraus? Man verwendet die JScript-Methode replace(). Das sieht dann im Code etwa so aus:

preis = preis.replace(/[,]/,'.');  // ersetze Komma mit Punkt

In den eckigen Klammern steht dabei das, was ersetzt wird und in den Anführungszeichen das wodurch es ersetzt werden soll. Näheres dazu findet man unter dem Thema Reguläre Ausdrücke (RegExp).

Jetzt sollte man den Variabeleninhalt noch nach Float konvertieren  dies sollte man machen, da zwischenzeitlich der Wert der Variable als String durch den Interpreter festgesetzt worden sein könnte. Bei einer Berechnung, die man dann mit diesem Wert ausführt, würde man also wieder die Fehlermeldung NaN (Not a Number) erhalten (näheres zu Konvertierungs-Methoden unter dem Thema Objektunabhängige Funktionen). Also konvertiere den Variabeleninhalt nach Float mit der Methode bzw. Funktion parseFloat():

preis = parseFloat(preis);  // konvertiere zu Float

Jetzt kannst du deine Berechnungen problemlos anstellen. Bleibt nur noch das Problem mit dem Runden  denn wer hat schon gerne einen Ergebniswert mit einer endlosen Nachkommazahl?! Dies ist im Prinzip auch sehr simpel. Wie bereits erwähnt stellt Float eine Nachkommazahl für JScript (und auch in anderen Programmier- bzw. Skriptsprachen) dar. Anders ist dies bei Integer - Integer ist die Bezeichnung für ganze Zahlen (also eine Zahl ohne Nachkommastelle). Konvertiert man nun einen Float nach Integer (parseInt()), so werden alle Nachkommastellen samt Komma bzw. Punkt von dem Wert abgeschnitten.

Um einen Wert z.B. auf 2 Nachkommastellen zu runden, geht man daher z.B. wie folgt vor:

wert = wert * 100;  // erhoehe wert um Faktor 100 (ergibt spaeter 2 Nachkommastellen)
  wert = parseInt(wert);  // schneide die ueberfluessigen Kommastellen ab (konvertiere von Float nach Integer)
  wert = parseFloat(wert); // lasse Kommastellen wieder zu (konvertiere von Integer nach Float)
  wert = wert / 100;  // verringere Variable wert um Divident 100 (generiere 2 Nachkommastellen)

Nun wolltest du wohl den neuen Inhalt deiner JScript-Variabel auf dem Bildschirm ausgeben  jedoch bestimmt nicht als einen Wert mit einem Punkt als Komma. Also muss man wieder etwas an dem Ausdruck verändern d.h. suche wieder nach einem regulären Ausdruck (in unserem Fall ist dies jetzt der Punkt) und ersetze diesen durch das Komma. Zuvor sollte man jedoch noch den Float-Zahlenwert der Variable in einen String verwandeln:

wert = String(wert);  // konvertiere nach String
  wert = wert.replace(/[.]/,','); // ersetze eventuellen Punkt mit Komma

Dies war der letzte Arbeitschritt bzw. vorletzte. Als nächstes muss dein neuer Wert noch auf dem Bildschirm für den User ausgegeben werden, das HTML-Formelement also mit dem neuen Wert belegt bzw. aktualisiert werden:

formElement[b].value = wert;  // weise wert dem Formelement mit dem Index b zu

Nun ist eigentlich alles erledigt - es könnte jedoch stören, dass Nullen, die auf den letzten Nachkommastellen liegen durch den Interpreter einfach abgeschnitten werden; man also Werte ausgegeben bekommt, die nicht in die Formatierung bzw. dem Design des User-Bildschirms passen wie z.B. 12,3 oder 12 anstelle von 12,30 oder 12,00. Um dieses zu ändern habe ich dir hier noch einen meiner kleinen Algorhythmen angehängt:

var z = 0;   // deklariere ZaehlerVariable

for (i=0; i < wert.length; i++)  // parse wert
 {
  nachKomma = wert.charAt(i); // belege Variable mit StellenWert an ParserPosition i

if (nachKomma == ',' || z != 0) // wenn Komma gefunden oder Zaehler nicht Null, dann ...
  {
   z++;    // erhoehe Zaehlervariable um eins
  }
 }

/* Im folgenden wird der Endwert fuer die Bildschirmausgabe modelliert - er wird gegebenenfalls um Nullen ergaenzt. */

if (z == 0)    // es existieren keine NachkommaStellen (durch Interpreter abgeschnitten)
 {
     formElement[b].value = wert+',00'; // erweiter wert um Komma und zwei Nullen und weise dem Formelement mit dem Index b zu
 }
 else if (z == 2)   // es existiert eine NachkommaStelle
 {
    formElement[b].value = wert+0; // erweiter wert um eine Null und weise diesem dem Formelement mit dem Index b zu
 }
 else if (z == 3)   // es existieren zwei NachkommaStellen
 {
    formElement[b].value = wert; // wert ohne Erweiterung dem Formelement mit dem Index b zuweisen
 }

So, das wars! Hoffentlich kann man mit meiner Antwort auf deine Frage etwas anfangen.

Mit freundlichen Grüßen,
Karsten Spin

[Maxx]

Hallo Carsten,

Um einen Wert z.B. auf 2 Nachkommastellen zu runden, geht man daher z.B. wie folgt vor:

wert = wert * 100;  // erhoehe wert um Faktor 100 (ergibt spaeter 2 Nachkommastellen)
  wert = parseInt(wert);  // schneide die ueberfluessigen Kommastellen ab (konvertiere von Float nach Integer)
  wert = parseFloat(wert); // lasse Kommastellen wieder zu (konvertiere von Integer nach Float)
  wert = wert / 100;  // verringere Variable wert um Divident 100 (generiere 2 Nachkommastellen)

Nein, das ist nicht runden. So werden aus z.B. 2,345 nur die Nachkommastellen auf 2 Stellen abgeschnitten (2,34). Und nicht auf 2 Nachkommastellen gerundet (2,35) Für die mathematische Rundung empfiehlt sich Math.round(). Beachte den Unterschied der mathematischen Rundung zur kaufmännischen bei negativen Zahlen.

Zuvor sollte man jedoch noch den Float-Zahlenwert der Variable in einen String verwandeln:

wert = String(wert);  // konvertiere nach String
  wert = wert.replace(/[.]/,','); // ersetze eventuellen Punkt mit Komma

Die Nachkommastellen (die 0en) passen aber immer noch nicht. Aus einer 2,50 wird eine 2,5 Aus einer 2,00 eine 2

Du hast dir sehr viel Mühe gegeben Karsten. Dennoch, so 100%ig passt es noch nicht. Eine allgemeine Beschreibung, ohne konkrete Codebeispiele hätte kastbgjh bestimmt auch weitergeholfen.

Grüße,

Jochen

[Maxx]

Sorry, ich war zu voreilig,
ich muss noch einen Kommentar zu den Nachkommastellen loswerden.

Nun ist eigentlich alles erledigt - es könnte jedoch stören, dass Nullen, die auf den letzten Nachkommastellen liegen durch den Interpreter einfach abgeschnitten werden; man also Werte ausgegeben bekommt, die nicht in die Formatierung bzw. dem Design des User-Bildschirms passen wie z.B. 12,3 oder 12 anstelle von 12,30 oder 12,00. Um dieses zu ändern habe ich dir hier noch einen meiner kleinen Algorhythmen angehängt:

var z = 0;   // deklariere ZaehlerVariable

for (i=0; i < wert.length; i++)  // parse wert
 {
  nachKomma = wert.charAt(i); // belege Variable mit StellenWert an ParserPosition i

if (nachKomma == ',' || z != 0) // wenn Komma gefunden oder Zaehler nicht Null, dann ...
  {
   z++;    // erhoehe Zaehlervariable um eins
  }
 }

/* Im folgenden wird der Endwert fuer die Bildschirmausgabe modelliert - er wird gegebenenfalls um Nullen ergaenzt. */

if (z == 0)    // es existieren keine NachkommaStellen (durch Interpreter abgeschnitten)
 {
     formElement[b].value = wert+',00'; // erweiter wert um Komma und zwei Nullen und weise dem Formelement mit dem Index b zu
 }
 else if (z == 2)   // es existiert eine NachkommaStelle
 {
    formElement[b].value = wert+0; // erweiter wert um eine Null und weise diesem dem Formelement mit dem Index b zu
 }
 else if (z == 3)   // es existieren zwei NachkommaStellen
 {
    formElement[b].value = wert; // wert ohne Erweiterung dem Formelement mit dem Index b zuweisen
 }

Diese Funktion ist suboptimal.

// egal wieviele Nackommastellen existieren. Es werden zwei 0'en angehängt.
wert = wert + "00";

// und dann erfolgt die Ausgabe vom Komma ab mit 2 Stellen.
wert.substring(0,wert.search(/,/) + 3);

Einzig für den Fall eines Wertes kleiner 1, oder einer Zahl ganz ohne Nachkommastellen muss eine Unterscheidung getroffen werden.
Im ersten Fall müssen wir eine führende 0 hinbasteln, im zweiten das Komma.

Grüße,

Jochen

[Karsten Spin]

Hallo Jochen (Maxx)!

SO lernt man etwas dazu. Danke!

Gruß,
Karsten Spin

[Karsten Spin]

Hallo Jochen (Maxx)!

Deine etwas komplexe Verschachtelung bezüglich der Nachkommastellen-Problematik scheint auch zu funktionieren.

Ich programmiere jedoch mehr nach dem Slogan: "Keep it simpel!" - was mir oftmals, gerade im Hinblick auf die verschiedenen Browsertypen, von Vorteil gewesen ist.

MfG,
Karsten Spin

[Maxx]

Hallo Kartsen,

Deine etwas komplexe Verschachtelung bezüglich der Nachkommastellen-Problematik scheint auch zu funktionieren.

Meine? Ist komplex? Oh! eigentlich ist es ein 2-Zeiler.

Ich programmiere jedoch mehr nach dem Slogan: "Keep it simpel!" -

ja, sehr gerne. Wobei ich ....
Also ich habe mal deine Codezeilen was die Aufbereitung der Nachkommastellen angeht gezählt. Es sind ohne Leerzeilen, Kommentare und { } 11 Codezeilen. Wobei ich mir nicht 100%ig sicher bin ob deine Methoden auch bei Zahlen < 1 funktionieren. Aber um 22:20, nach 2 Gläsern Frankenwein ist mir das egal.

Was wollte ich sagen? richtig. Sind 11 Zeilen simpel? Was machst du wenn es richtig komplex wird?

Vielleicht arbeite ich das Thema "runden" auch mal weiter aus.

*Prost*

Jochen

[Antje Hofmann]

Hallo Karsten,

könntest du aus diesem Posting einen Tipps&Trick-Beitrag machen?

http://aktuell.de.selfhtml.org/tippstricks/beitrag.htm

Es wäre schade darum, wenn er im Archiv verschwinden würde.

Zur Ergänzung des Themas:

Einige Browser kennen die wunderschöne Funktion toLocaleString().

Der Aufruf 2.3.toLocaleString()

ergibt beim

Win98 deutsch / IE6 deutsch: 2,30
Win98 deutsch / Mozilla englisch: 2.3
Win98 deutsch / Opera englisch: 2.3
Win98 deutsch / NN 4.7: unbekannte Funktion

Es wäre nett, wenn Nutzer anderer Browser, Browsersprachen und Betriebssysteme diese Funktion testen würden und die Ergebnisse unter diesem Thread anhängen würden.

Dazu einfach folgenden Aufruf in die Adresszeile kopieren:

javascript:alert(2.3.toLocaleString())

Viele Grüße

Antje

[Benne]

Sers,

Einige Browser kennen die wunderschöne Funktion toLocaleString().
Der Aufruf 2.3.toLocaleString()

toLocalString ist allerdings für Datumsobjekte gedacht und es dürfte nicht wundern, wenn die Verwendung keine vernünftigen Ergebnisse für diesen Fall liefert.

Gruß

[Antje Hofmann]

Hallo Benne

Einige Browser kennen die wunderschöne Funktion toLocaleString().
Der Aufruf 2.3.toLocaleString()
toLocalString ist allerdings für Datumsobjekte gedacht und es dürfte nicht wundern, wenn die Verwendung keine vernünftigen Ergebnisse für diesen Fall liefert.

nein, lediglich für das Date-Objekt ist das eine allgemein bekannte Methode.

Die ECMA-262 Spezifikation sagt zu dieser Methode:

Object.prototype.toLocaleString ( )

This function returns the result of calling toString().

NOTE 1
This function is provided to give all Objects a generic toLocaleString interface, even though not all may use it. Currently, Array, Number, and Date provide their own locale-sensitive toLocaleString methods.

und direkt zum Number-Objekt:

Number.prototype.toLocaleString()

Produces a string value that represents the value of the Number formatted according to the conventions of the host environments current locale. This function is implementation-dependent, and
it is permissible, but not encouraged, for it to return the same thing as toString.

Ich finde die Umsetzung im IE das tatsächlich übliche Format (im Deutschen eben der Tausenderpunkt und das Komma als Dezimalzeichen)
auszugeben sehr sinnvoll.

Viele Grüße

Antje

[kastbgjh]

Danke!

Die letzten Beiträge haben mir weitergeholfen.

Grüße,
kastbgjh

[Karsten Spin]

Danke!

Die letzten Beiträge haben mir weitergeholfen.

Grüße,
kastbgjh

Hallo kastbgjh!

Es freut mich, dass dir das Forum weiterhelfen konnte - bedenke immer, dass mehrere Wege nach Rom führen. Es ist halt nur wichtig, sich auch auf den Weg dorthin zu machen.

Gruß und viel Erfolg,
Karsten Spin

PS: schaue dir unbedingt noch die Methode 'math.round()' an - ist noch wichtig. Habe ich vergessen - SORRY, aber Jochen hat ja aufgepasst.