Preise formatieren in JavaScript

Preise formatieren in JavaScript

Vor ein paar Tagen sollte ich mittels JavaScript Preise formatieren und das auch noch sprachabhängig. Ja, ich weiß sowas macht man nicht, es ging hier allerdings nicht um den direkten Checkout sondern darum mittels Konfigurator, den Basispreis plus die Zusatzmodule zu berechnen. Da finde ich’s okay, wenn’s der Client (Browser; z.B: Firefox, Chrome, usw.) übernimmt.

Die größte Schwierigkeit war es, dann eine Sprach- beziehungsweise Länderspezifische Ausgabe zu starten. Und im ernst – ich hab mir da erst voll ein abgefrickelt mit der JS-Funktion toFixed(2). Ja, kann man machen. Geht aber viel besser und einfacher!

Der bessere Weg ist,…

…dann tatsächlich über toLocaleString() zu gehen. Hier kann man direkt als Parameter die minimale und die maximale Anzahl von Digits hinter dem Komma angeben.

Um die aktuelle Sprache zubekommen, nutze ich dann ganz gern das HTML-Lang Attribut. Es sei denn natürlich, ich habe hier andere Vorgaben, da dies für einen einsprachigen Shop passierte, was das auch okay.

Preise formatieren, wie macht man’s denn jetzt besser? Code beispiel

Die Sprache selbst kannst du zum Beispiel mit jQuery so auslesen:

var lang = $('html').attr('lang');

Die Funktion für die Preisformatierung schaut so aus:

function priceFormatter( lang, productPrice ) {

    productPrice = '€* ' + parseFloat( productPrice ).toLocaleString( lang, {
        minimumFractionDigits : 2,
        maximumFractionDigits : 2
    } );

    return productPrice;
}

Das ganze kannst du auch nochmal hier nachschlagen: toLocaleString