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. October 2012 -- Tween Beispiele (0)

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

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

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

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

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

Comments (33)
3663 mal gelesen.

33 Kommentare

Leave a comment »

Seiten:

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

Hallo Struppi,

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

Daniel

2. Comment 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. Comment von: Tino
27. September 2006: 11:21

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

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

Danke ich hab’s geändert.

5. Comment von: Hubbe
10. October 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. Comment von: Struppi
10. October 2006: 19:15

Ja hatte sie, danke für den Hinweis.

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

Super, funktioniert einwandfrei, danke!

8. Comment von: Kai
12. February 2007: 17:28

Ein klasse Skript, genau sowas hab ich gesucht.

9. Comment von: ramon
8. February 2008: 12:14

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

10. Comment von: Opmil
10. May 2008: 11:47

Hallo

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

11. Comment von: Struppi
11. May 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. Comment von: mormel
23. July 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. Comment von: Struppi
23. July 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. Comment von: mormel
23. July 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. Comment von: Struppi
23. July 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. Comment 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. Comment von: Urs Bachmann
3. January 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. Comment 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. Comment von: Struppi
7. April 2009: 8:36

ist drin.

20. Comment von: Rolf
6. October 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. Comment 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. Comment 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. Comment 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. Comment 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. Comment von: Uprocker
18. June 2012: 13:18

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

26. Comment von: Struppi
20. June 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. Comment 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. Comment von: Fogger
29. January 2014: 10:07

Hallo,

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

Gruss Fogger

29. Comment von: struppi
30. January 2014: 14:53

Doh – du hast recht!

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

Danke!

30. Comment von: Jock
4. February 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. Comment von: Bodo
9. March 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. Comment von: Bodo
9. March 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. Comment von: struppi
10. March 2014: 9:12

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

Die im Artikel vorgestellte Funktion macht aber mehr.

Leave a comment

Name (required)
Mail (wird nicht angezeigt) (required)
Website

Folgende HTML Tags sind erlaubt: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>



Powered by WordPress Stop Spam Harvesters, Join Project Honey Pot kostenloser Counter Browser-Statistiken
rats-wonderful
rats-wonderful
rats-wonderful
rats-wonderful