Javascript Programmierung – Zahl formatieren mit Javascript

11. Mai 2010  |  Kommentar schreiben   |  Tags: ,



Bei Facebook teilen

Bei der Programmierung mit Javascript (JS), müssen wir oft mit Zahlen arbeiten. Diese Zahlen werden aber vom System automatisch auf die U.S. Schreibweise angepasst. Das bedeutet, dass das Komma zur Gruppierung der Tausenderstellen benutzt wird, wobei der Punkt als Trennzeichen für die Nachkommastellen gilt. Eine solche Zahl würde so aussehen:

1000.00 – U.S. Schreibweise

Wir möchten aber, dass die Zahl nach der deutschen Schreibweise generiert wird, und zwar:

1000,00 – deutsche Schreibweise

Oft müssen wir mit Javascript zahlen “on-the-fly” formatieren, wenn wir beispielsweise buchhalterische Rechnungen mit JS/Ajax machen, wo die Seite nicht neu aufgerufen und somit vom Server nicht generiert wird. Wir könnten mit PHP die Zahlen formatieren, manchmal aber brauchen wir eine einfache Funktion, die die Zahl so verarbeiten kann, dass sie der deutschen Schreibweise entspricht und das Webdesign konform behält. Anbei eine solche Funktion, geschrieben in Javascript:

function ZahlFormatieren(x) {
var k = (Math.round(x * 100) / 100).toString();
var sEnding;
var sReturn;
if (k.indexOf('.') == -1)
sEnding = '.00';
else
sEnding = '00';

k = k + sEnding;

var p = k.indexOf('.');
sReturn = k.substring(0, p);
sReturn = sReturn + ',';
sReturn = sReturn + k.substring(p+1, p+3);
return sReturn;
}

Was macht die Funktion?

Die Javascript Funktion zur Formatierung von Zahlen übernimmt lediglich die vom System generierte Zahl, z.B. von einer Berechnung von anderen Zahlen. Zunächst wird geprüft, ob die Zahl bereits Nachkommastellen hat und wenn nein, werden automatisch die .00 am Ende der Zahl angehängt. Dann wird der Punkt durch ein Komma ersetzt und die Zahl wird zurückgegeben.

Implementierung der Funktion

Sie können die Funktion auf ein Ereignis setzen, so etwa wie onclick. Beispielsweise können Sie ein Feld haben, wo Sie eine Zahl eingeben und ein Button haben, der die Zahl in dem Feld formatiert:

<input type="text" value="24.5" id="FieldToFormat" />
<input type="button" value="Zahl formatieren" onclick="document.getElementById('FieldToFormat').value=ZahlFormatieren(document.getElementById('FieldToFormat').value);" />

Natürlich muss die Funktion bereits per Include oder im Head per <script></script> der Seite zur Verfügung stehen, um aufgerufen werden zu können.

Erweiterungen

Man kann relativ einfach noch den Punkt zur Gruppierung von Tausenderstellen einfügen, sowie diverse Währungszeichen anhängen, z.B. €. Diese müsste man als Parameter übergeben. Wenn Sie eine dynamische Aktualisierung eines Warenkorbs oder Positionen in einer Rechnung programmieren, so hilft Ihnen diese Funktion die Zahlen der deutschsprachigen Nutzer korrekt darzustellen und eine Irritation zu vermeiden.

Teilen

Hinterlasse eine Antwort

Du musst angemeldet sein, um einen Kommentar abzugeben.