Javascript ist Toll!

30. August 2005 - 10:12

Zahlen formatieren

Die folgende Funktion formatiert Zahlen.

js/num_format.js
 

Erläuterung

Die Funktion ist eine prototypische Erweiterung des Number Objekts, d.h. sie kann als Methode auf alle Zahlen angewendet werden. Der Aufruf zahl.format() erwartet bis zu zwei Parameter mit folgender Bedeutung:

Beispiel

Zahl:    
Stellen: 
fixieren: 



ähnliche Artikel

  • 27. Oktober 2012 -- Tween Beispiele (0)

    Das Tween Objekt Ich vertiefe hier noch einmal die...

  • 22. Juni 2012 -- Tween(2) (0)

    Die Technik um mit Javascript eine Bewegung zu animieren...

  • 15. Juni 2012 -- Wordpress und Javascript (2)

    In der letzten Zeit durfte ich mich etwas intensiver...

Comments (33)
10316 mal gelesen.

33 Kommentare

Leave a comment »

Seiten:

1. Kommentar von: Daniel Messerli
27. September 2005: 11:10

Hallo Struppi,

vielen Dank für deine Funktion hat sofort tadellos funktioniert.

Daniel

2. Kommentar von: Tino
27. September 2006: 11:20

Hallo,

die Funktion hat noch einen Fehler, wenn man Ganzzahlen eingibt und Nachkommastellen haben will (z. B. „1“) – dann wird aus der 1 eine 1000 (bei 2 Nachkommastellen)!
….

3. Kommentar von: Tino
27. September 2006: 11:21

Das Problem tritt auf, wenn die Zahl als Zahl übergeben wird, nicht als String. ;-)

4. Kommentar von: Struppi
27. September 2006: 16:04

Danke ich hab’s geändert.

5. Kommentar von: Hubbe
10. Oktober 2006: 17:03

Hi,

die Funktion scheint Schwierigkeiten mit negativen Zahlen zu haben.
Beispiel mit 2 Nachkommastellen:
-1 -> -0,99
-5 -> -4,99
Beispiel mit 0 Nachkommastellen:
-1 -> 0
-2 -> -1

Gruß, Hubbe

6. Kommentar von: Struppi
10. Oktober 2006: 19:15

Ja hatte sie, danke für den Hinweis.

7. Kommentar von: Hoke
9. November 2006: 16:10

Super, funktioniert einwandfrei, danke!

8. Kommentar von: Kai
12. Februar 2007: 17:28

Ein klasse Skript, genau sowas hab ich gesucht.

9. Kommentar von: ramon
8. Februar 2008: 12:14

jo, danke auch von meiner seite für die funtion! klappt alles bestens!
weiter so! gruß

10. Kommentar von: Opmil
10. Mai 2008: 11:47

Hallo

Wäre toFixed() nicht einfacher?
http://de.selfhtml.org/javascript/objekte/number.htm#to_fixed

11. Kommentar von: Struppi
11. Mai 2008: 12:25

Ja würe es, wenn es richtig Runden würde und wenn es auch die tausender Stellen formatieren würde. Probier mal z.b. 1202.955 mit toFixed() aus (zumindest FF und OP rundet das falsch [1202.95]).

12. Kommentar von: mormel
23. Juli 2008: 11:10

hi struppi,

danke für deine funktion, nur gibt es noch einen fehler:

aus 1.234,00 oder auch 0,00 wird NaN,00

vg mormel

13. Kommentar von: Struppi
23. Juli 2008: 11:20

Das ist kein Fehler, du musst natürlich eine Zahl eingeben 1.234,00 ist ein String, das Komma ist in JS (und allen anderen Programmiersprachen) ein Punkt

14. Kommentar von: mormel
23. Juli 2008: 11:37

hmm, natürlich, aber:
ich gebe in ein Formularfeld 1234 ein, dann wird deine Funktion per onblur aufgerfufen und es wird daraus 1.234,00. Gehe ich im Formular zurück und komme wieder in dieses Feld wird beim nächten onblur daraus NaN,00 und das ist nicht so gewollt, oder?

vg mormel

15. Kommentar von: Struppi
23. Juli 2008: 12:36

Dann musst du dies in deinem Skript entsprechend umwandeln. Es ist klar, dass der Rückgabewert der Funktion ein String ist, mit dem du nicht rechnen kannst (und auch nicht diese Funktion aufrufen).

16. Kommentar von: atlan428
13. September 2008: 17:00

Ich habe deine Funktion mal so umgeschrieben, dass sie gleich mit der PHP-Funktion number_format ist. Dürfte für alle PHP-Entwickler interessant sein.

function number_format(numeral, decimals, dec_point, thousands_sep) {
var neu = '';

// Runden
var f = Math.pow(10, decimals);
numeral = '' + parseInt(numeral * f + (.5 * (numeral > 0 ? 1: -1))) / f;

// Komma ermittlen
var idx = numeral.indexOf('.');

// fehlende Nullen einfügen
if(idx != -1) {
numeral += (idx == -1 ? '.': '') + f.toString().substring(1);
}

// Nachkommastellen ermittlen
idx = numeral.indexOf('.');
if(idx == -1) idx = numeral.length;
else neu = dec_point + numeral.substr(idx + 1, decimals);

// Tausendertrennzeichen
while(idx > 0) {
if(idx - 3 > 0)
neu = thousands_sep + numeral.substring(idx - 3, idx) + neu;
else
neu = numeral.substring(0, idx) + neu;
idx -= 3;
}

return neu;
}

17. Kommentar von: Urs Bachmann
3. Januar 2009: 17:43

Besten Dank fuer diese Funktion. Ich setzte sie ein um Zahlen aus FileMaker Web Companion zu formatieren.

Ich habe das Script noch so korrigiert, dass auch Nachnullen bei Zahlen ohne Dezimalstellen angezeigt werden. Auch das Einfuegen der Tausendermarkierung bei negativen Werten wird jetzt korrekt ausgefuehrt.

function number_format(numeral, decimals, dec_point, thousands_sep) {
var neu = “;

// Korrektur bei negativer Zahl, Teil 1
var negativ = “;
if(numeral 0 ? 1: -1))) / f;

// Komma ermittlen
var idx = numeral.indexOf(‚.‘);

// fehlende Nullen einfügen
if(idx != -1) {
numeral += (idx == -1 ? ‚.‘: “) + f.toString().substring(1);
}

// Nachkommastellen ermittlen
idx = numeral.indexOf(‚.‘);
if(idx == -1) {
idx = numeral.length;
neu = ‚.00‘;
}
else neu = dec_point + numeral.substr(idx + 1, decimals);

// Tausendertrennzeichen
while(idx > 0) {
if(idx – 3 > 0)
neu = thousands_sep + numeral.substring(idx – 3, idx) + neu;
else
neu = numeral.substring(0, idx) + neu;
idx -= 3;
}

// Korrektur bei negativer Zahl, Teil 2
neu =negativ + neu;

return neu;
}

18. Kommentar von: Stefan
6. April 2009: 20:28

Das Script ist toll, aber könntest du bitte dein js-script bitte mir der Korrigierten PHP Version abbleichen bezüglich Tausendertrennzeichen bei negativen Zahlen.
Würde es ja gerne selbst machen, brings aber irgendwie nicht hin.

19. Kommentar von: Struppi
7. April 2009: 8:36

ist drin.

20. Kommentar von: Rolf
6. Oktober 2010: 9:16

Hi Struppi,
selten, dass Javascript so me-nothing-you-nothing funktioniert. Deine Funktion aber läudt SOFORT und arbeitet klasse.
Danke !

21. Kommentar von: Formatierung
1. April 2011: 0:17

Ohm mann, ja das Runden ist immer so ein Problem. Man, ich hatte da auch ziemliche Probleme…

22. Kommentar von: Tom
11. August 2011: 1:18

Ich bin ABSOLUTER JavaScript Anfänger (seit 2 Tagen :)) und selbst bei mir funktioniert die Funktion auf Anhieb! – PERFEKT … vielen Dank.

Gruß
Thom

23. Kommentar von: christian
15. November 2011: 16:58

Cooles Skript, aber auch hier wird ein zweiter Durchlauf mit einer Kommazahl mit „NaN“ quittiert. Wie kann ich dem Skript denn beibringen, als Dezimaltrenner das Komma zu akzeptieren?

Wenn ich richtig verstehe, wird die Zeile
‚var dec_point = ‚,‘;‘
ja nur beim Zusammenbauen des Strings für die Ausgabe genutzt…

Beim Eingang der Funktion müßte man doch nur prüfen, ob der Eingabewert (als String) ein Komma enthält, dieses dann durch einen Punkt ersetzen, die Funktion rechnen (runden) lassen und das Ergebnis wieder von Punkt auf Komma umformatieren. „Nur“. :)
Wenn ich’s könnte, würde ichs tun, JavaScript liegt mir aber nicht.

24. Kommentar von: Struppi
15. November 2011: 17:41

Interessanter und begründeter Einwurf. Ich guck mal, ob ich eine Lokalisierung konsequenter einbaue.

Du kannst dir aber vorläufig damit behelfen:

var zahl = '1000,99';
 
alert( formatZahl(zahl.replace(/,/, '.'), 2, true));

Aus progammiertechnischer Sicht ist das aber fragwürdig. Im Prinzip sollten Zahlen immer Zahlen sein und Formatierung nur bei der Ausgabe angewandt werdenn.

25. Kommentar von: Uprocker
18. Juni 2012: 13:18

569.925 wird bei zwei Nachkommastellen auf 569.92 gerundet.
Sollte es nicht 569.93 sein?

26. Kommentar von: Struppi
20. Juni 2012: 13:21

Ja sollte es, tut es jetzt auch.

Da war vorher die die float < => integer Konvertierung von JS im Weg. Der Fehler tritt sogar bei der JS Methode toFixed() auf.

alert((569.925).toFixed(2));

gibt ebenfalls 569.92 aus.

27. Kommentar von: Ralf Vehlen
22. November 2013: 14:24

Vielen Dank für die Funktion – mit folgender Modifikation klappt diese bei uns perfekt :-)

Komplette Formatierung mit Aufruf im Input Feld:
Aufruf (php – deshalb “ statt „):

Funktion:

function format_zahl(numeral, decimals, id)
{
var neu = “;
var dec_point = ‚,‘;
var thousands_sep = ‚.‘;

numeral = numeral.replace(‚.‘, “);
numeral = numeral.replace(‚,‘, ‚.‘);
numeral = numeral.replace(/[^0-9\.]+/g, “);

// Runden
var f = Math.pow(10, decimals);
numeral = “ + parseInt(numeral * f + (.5 * (numeral > 0 ? 1: -1))) / f;
// Komma ermittlen
var idx = numeral.indexOf(‚.‘);
// fehlende Nullen einfügen
if(idx != -1)
{
numeral+=(idx == -1 ? ‚.‘: “)+f.toString().substring(1);
}
// Nachkommastellen ermittlen
idx = numeral.indexOf(‚.‘);
if(idx == -1) idx = numeral.length;
else neu = dec_point + numeral.substr(idx + 1, decimals);

// Tausendertrennzeichen
while(idx > 0)
{
if(idx – 3 > 0)
neu = thousands_sep+numeral.substring(idx – 3, idx)+neu;
else
neu = numeral.substring(0,idx)+neu;
idx -= 3;
}
document.getElementById(id).value = neu;
//alert (‚Test:’+numeral+decimals+dec_point+thousands_sep+‘ – ‚+neu+id);
}

28. Kommentar von: Fogger
29. Januar 2014: 10:07

Hallo,

klasse Script.
aber bei -100 kommt -.100,00
Wenn das noch geht, ist es perfekt.

Gruss Fogger

29. Kommentar von: struppi
30. Januar 2014: 14:53

Doh – du hast recht!

Ich hab’s geändert, jetzt sollte es hoffentlich funktionieren.

Danke!

30. Kommentar von: Jock
4. Februar 2014: 16:24

Man man man, da probiere ich eine Stunde über jQuery und dessen Plugin (welches seinerseits eine weitere .js-Datei benötigt) erfolglos Eingaben entsprechend zu formatieren, und dann finde ich diese schöne Funktion und… es klappt SOFORT! Vielen vielen Dank!!

31. Kommentar von: Bodo
9. März 2014: 14:39

Meistens gehts doch darum, einen Betrag mit zwei Nachkommastellen zu formatieren. Dann am kuerzesten:

function formatPreis( value ) {

value = Math.round( value * 100 );

var valText = “ + value;
var length = valText.length;

return valText.substr( 0, length – 2 ) + ‚,‘ + valText.substr( length – 2 );

}

32. Kommentar von: Bodo
9. März 2014: 14:49

Manches ist doch komplizierter, als es zuerst aussieht. Anbei meine Korrektur meiner vorherigen Funktion die fuer Werten kleiner 1 falsch formatiert hat:

function formatPreis( value ) {

value = Math.round( value * 100 );

var vorzeichen = value < 0 ? '-' : '';

value = Math.abs( value );

var valText = '' + value;
var length = valText.length;
if ( length < 3 ) {
valText = ( '000' ).substr( 0, 3 – length ) + valText;
length = valText.length;
}

return vorzeichen + valText.substr( 0, length – 2 ) + ',' + valText.substr( length – 2 );

}

33. Kommentar von: struppi
10. März 2014: 9:12

Oder noch einfacher: value = value.toFixed(2);

Die im Artikel vorgestellte Funktion macht aber mehr.

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.

Diese Website verwendet Akismet, um Spam zu reduzieren. Erfahre mehr darüber, wie deine Kommentardaten verarbeitet werden.

Powered by WordPress Stop Spam Harvesters, Join Project Honey Pot
rats-wonderful
rats-wonderful
rats-wonderful
rats-wonderful