Kategorien
Webdesign

Zahlen formatieren mit System

Große Zahlen im Tausender-Bereich und aufwärts sind schwer zu erfassen, sofern sie nicht ordentlich formatiert werden. Trennt man Tausender, jeweils drei Stellen von hinten, lässt sich dem Problem schnell beikommen. Javascript hilft dabei. Gerade wenn sich…

Große Zahlen im Tausender-Bereich und aufwärts sind schwer zu erfassen, sofern sie nicht ordentlich formatiert werden. Trennt man Tausender, jeweils drei Stellen von hinten, lässt sich dem Problem schnell beikommen. Javascript hilft dabei.

Gerade wenn sich die Zahlen ständig ändern, möchte man sie nicht laufend von Hand neu formatieren müssen, damit der Besucher sie auch ordentlich lesen kann. Kommt diese Javascript-Funktion in den <head>-Bereich der Datei, lässt sich später die zu formatierende Zahl in einem Javascript-Block mit einem einfachen Befehl ausgeben:

 document.write(komma(12345678));

Damit wird die Zahl gleich umformatiert, in ein einfacher zu lesendes: „1.234.567.890“. Wenn sich die Zahl dann später ändert, muss auf die Trennzeichen keine Rücksicht genommen werden.

Der Quelltext für die Funktion komma() im Head-Bereich:

      <html><head>

<script language="JavaScript">
 function komma(nummer) {

var nummer = '' + nummer;
 var laenge = nummer.length;
 if (laenge >
3) {
 var mod = laenge % 3;
 var output = (mod > 0 ?
 (nummer.substring(0,mod))
: '');
 for (i=0 ; i < Math.floor(laenge / 3); i++) {
 if ((mod == 0)
&& (i == 0))
 output += nummer.substring(mod+ 3 * i,
 mod + 3 *
i + 3); else
 output+= '.' + nummer.substring(mod + 3 * i,
 mod + 3 * i
+ 3); } return (output); }
 else return nummer; }
 </script></head>

Der Body kann für eine einfach Liste dann zum Beispiel so aussehen:

      <body>

<script language="javascript">
 document.write(komma(12345678)+'<BR>');

document.write(komma(123456789)+'<BR>');
 document.write(komma(1234567890)+'<BR>');

</script>
 </body>
 </html>

Der Übersicht halber sollten die Zahlen rechtsbündig aufgelistet werden, damit die richtigen Werte auch untereinander stehen. Damit alle Zahlen auch wirklich die gleiche Breite aufweisen, hilft die Formatierung mit <pre> für die Zahlenreihe, das passt aber nicht in jedes Design.

Nur mit Tabellen wird es etwas schwieriger, hier muss auch der Tabellen-Code mit document.write ausgegeben werden.

      <table>
 <script language="javascript">

document.write('<tr><td>Gewinn 2001: </td>');
 document.write('<td
align=right>'+komma(245678)+'</td></tr>');
 document.write('<tr><td>Gewinn
2002: </td>');
 document.write('<td align=right>'+komma(35625678)+'</td></tr>');

document.write('<tr><td>Gewinn 2003: </td>');
 document.write('<td
align=right>'+komma(156325678)+'</td></tr>');
 </script>

</table>

Das sieht auf den ersten Blick verwirrend aus, ist aber doch einfach zu durchschauen: Für jede der zwei nebeneinander liegenden Tabellenzellen ist jeweils eine document.write Zeile zuständig.

Schreibe einen Kommentar

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