Ich möchte einen Preis in JavaScript formatieren. Ich möchte eine Funktion, die a float
als Argument verwendet und eine folgende string
Formatierung zurückgibt :
"$ 2,500.00"
Was ist der beste Weg, dies zu tun?
Ich möchte einen Preis in JavaScript formatieren. Ich möchte eine Funktion, die a float
als Argument verwendet und eine folgende string
Formatierung zurückgibt :
"$ 2,500.00"
Was ist der beste Weg, dies zu tun?
Antworten:
Diese Lösung ist mit jedem einzelnen großen Browser kompatibel:
const profits = 2489.8237;
profits.toFixed(3) //returns 2489.824 (rounds up)
profits.toFixed(2) //returns 2489.82
profits.toFixed(7) //returns 2489.8237000 (pads the decimals)
Alles was Sie brauchen, ist das Währungssymbol (zB "$" + profits.toFixed(2)
) hinzuzufügen und Sie haben Ihren Betrag in Dollar.
Wenn Sie die Verwendung ,
zwischen den einzelnen Ziffern benötigen , können Sie diese Funktion verwenden:
function formatMoney(number, decPlaces, decSep, thouSep) {
decPlaces = isNaN(decPlaces = Math.abs(decPlaces)) ? 2 : decPlaces,
decSep = typeof decSep === "undefined" ? "." : decSep;
thouSep = typeof thouSep === "undefined" ? "," : thouSep;
var sign = number < 0 ? "-" : "";
var i = String(parseInt(number = Math.abs(Number(number) || 0).toFixed(decPlaces)));
var j = (j = i.length) > 3 ? j % 3 : 0;
return sign +
(j ? i.substr(0, j) + thouSep : "") +
i.substr(j).replace(/(\decSep{3})(?=\decSep)/g, "$1" + thouSep) +
(decPlaces ? decSep + Math.abs(number - i).toFixed(decPlaces).slice(2) : "");
}
document.getElementById("b").addEventListener("click", event => {
document.getElementById("x").innerText = "Result was: " + formatMoney(document.getElementById("d").value);
});
<label>Insert your amount: <input id="d" type="text" placeholder="Cash amount" /></label>
<br />
<button id="b">Get Output</button>
<p id="x">(press button to get output)</p>
Verwenden Sie es so:
(123456789.12345).formatMoney(2, ".", ",");
Wenn Sie immer '.' und ',' können Sie sie aus Ihrem Methodenaufruf auslassen, und die Methode wird sie standardmäßig für Sie festlegen.
(123456789.12345).formatMoney(2);
Wenn in Ihrer Kultur die beiden Symbole umgedreht sind (z. B. Europäer) und Sie die Standardeinstellungen verwenden möchten, fügen Sie einfach die folgenden zwei Zeilen in die formatMoney
Methode ein:
d = d == undefined ? "," : d,
t = t == undefined ? "." : t,
Wenn Sie die moderne ECMAScript-Syntax (dh über Babel) verwenden können, können Sie stattdessen diese einfachere Funktion verwenden:
function formatMoney(amount, decimalCount = 2, decimal = ".", thousands = ",") {
try {
decimalCount = Math.abs(decimalCount);
decimalCount = isNaN(decimalCount) ? 2 : decimalCount;
const negativeSign = amount < 0 ? "-" : "";
let i = parseInt(amount = Math.abs(Number(amount) || 0).toFixed(decimalCount)).toString();
let j = (i.length > 3) ? i.length % 3 : 0;
return negativeSign + (j ? i.substr(0, j) + thousands : '') + i.substr(j).replace(/(\d{3})(?=\d)/g, "$1" + thousands) + (decimalCount ? decimal + Math.abs(amount - i).toFixed(decimalCount).slice(2) : "");
} catch (e) {
console.log(e)
}
};
document.getElementById("b").addEventListener("click", event => {
document.getElementById("x").innerText = "Result was: " + formatMoney(document.getElementById("d").value);
});
<label>Insert your amount: <input id="d" type="text" placeholder="Cash amount" /></label>
<br />
<button id="b">Get Output</button>
<p id="x">(press button to get output)</p>
d
und t
zu sein .
und ,
jeweils so , dass Sie sie nicht haben jedes Mal zu spezifizieren. Außerdem empfehle ich, den Anfang der return
Anweisung so zu ändern return s + '$' + [rest]
, dass er lautet: Andernfalls erhalten Sie kein Dollarzeichen.
Javascript hat einen Zahlenformatierer (Teil der Internationalisierungs-API).
// Create our number formatter.
var formatter = new Intl.NumberFormat('en-US', {
style: 'currency',
currency: 'USD',
});
formatter.format(2500); /* $2,500.00 */
Verwenden Sie undefined
anstelle des ersten Arguments ( 'en-US'
im Beispiel) das Systemgebietsschema (das Benutzergebietsschema, falls der Code in einem Browser ausgeführt wird). Weitere Erläuterung des Gebietsschemacodes .
Hier ist eine Liste der Währungscodes .
Ein letzter Hinweis zum Vergleich mit dem älteren. toLocaleString
. Beide bieten im Wesentlichen die gleiche Funktionalität. ToLocaleString in seinen älteren Inkarnationen (vor Intl) unterstützt jedoch keine Gebietsschemas : Es verwendet das Systemgebietsschema. Stellen Sie daher sicher, dass Sie die richtige Version verwenden ( MDN empfiehlt, die Existenz von zu überprüfenIntl
). Außerdem ist die Leistung beider für ein einzelnes Element gleich. Wenn Sie jedoch viele Zahlen formatieren müssen, ist die Verwendung Intl.NumberFormat
~ 70-mal schneller. So verwenden Sie toLocaleString
:
(2500).toLocaleString('en-US', {
style: 'currency',
currency: 'USD',
}); /* $2,500.00 */
(12345.67).toFixed(2).replace(/\d(?=(\d{3})+\.)/g, '$&,'); // 12,345.67
Die Idee hinter dieser Lösung besteht darin, übereinstimmende Abschnitte durch erste Übereinstimmung und Komma zu ersetzen, d '$&,'
. H. Der Abgleich erfolgt nach dem Lookahead-Ansatz . Sie können den Ausdruck als "Übereinstimmung mit einer Zahl, wenn darauf eine Folge von drei Zahlensätzen (einer oder mehrere) und einem Punkt folgt" lesen .
TESTS:
1 --> "1.00"
12 --> "12.00"
123 --> "123.00"
1234 --> "1,234.00"
12345 --> "12,345.00"
123456 --> "123,456.00"
1234567 --> "1,234,567.00"
12345.67 --> "12,345.67"
DEMO: http://jsfiddle.net/hAfMM/9571/
Sie können den Number
Objektprototyp auch erweitern , um zusätzliche Unterstützung für eine beliebige Anzahl von Dezimalstellen [0 .. n]
und die Größe von Zahlengruppen hinzuzufügen [0 .. x]
:
/**
* Number.prototype.format(n, x)
*
* @param integer n: length of decimal
* @param integer x: length of sections
*/
Number.prototype.format = function(n, x) {
var re = '\\d(?=(\\d{' + (x || 3) + '})+' + (n > 0 ? '\\.' : '$') + ')';
return this.toFixed(Math.max(0, ~~n)).replace(new RegExp(re, 'g'), '$&,');
};
1234..format(); // "1,234"
12345..format(2); // "12,345.00"
123456.7.format(3, 2); // "12,34,56.700"
123456.789.format(2, 4); // "12,3456.79"
DEMO / TESTS: http://jsfiddle.net/hAfMM/435/
In dieser super erweiterten Version können Sie verschiedene Trennzeichentypen festlegen:
/**
* Number.prototype.format(n, x, s, c)
*
* @param integer n: length of decimal
* @param integer x: length of whole part
* @param mixed s: sections delimiter
* @param mixed c: decimal delimiter
*/
Number.prototype.format = function(n, x, s, c) {
var re = '\\d(?=(\\d{' + (x || 3) + '})+' + (n > 0 ? '\\D' : '$') + ')',
num = this.toFixed(Math.max(0, ~~n));
return (c ? num.replace('.', c) : num).replace(new RegExp(re, 'g'), '$&' + (s || ','));
};
12345678.9.format(2, 3, '.', ','); // "12.345.678,90"
123456.789.format(4, 4, ' ', ':'); // "12 3456:7890"
12345678.9.format(0, 3, '-'); // "12-345-679"
DEMO / TESTS: http://jsfiddle.net/hAfMM/612/
.replace(/(\d)(?=(\d{3})+(?:\.\d+)?$)/g, "$1,")
.
Number.prototype.toMoney = (decimal=2) -> @toFixed(decimal).replace /(\d)(?=(\d{3})+(?:\.\d+)?$)/g, "$1,"
\.
mit $
(Ende der Zeile), dh this.toFixed(0).replace(/(\d)(?=(\d{3})+$)/g, "$1,")
.
$1,
. Der Abgleich erfolgt nach dem Lookahead-Ansatz . Sie können den Ausdruck als "Übereinstimmung mit einer Zahl, wenn darauf eine Folge von drei Zahlensätzen (einer oder mehrere) und einem Punkt folgt" lesen .
Schauen Sie sich das JavaScript Number- Objekt an und prüfen Sie, ob es Ihnen helfen kann.
toLocaleString()
formatiert eine Zahl mit einem standortspezifischen Tausendertrennzeichen. toFixed()
rundet die Zahl auf eine bestimmte Anzahl von Dezimalstellen.Um diese gleichzeitig zu verwenden, muss der Typ des Werts wieder in eine Zahl geändert werden, da beide eine Zeichenfolge ausgeben.
Beispiel:
Number((someNumber).toFixed(1)).toLocaleString()
toLocaleString
, die das Systemgebietsschema verwendet, und eine neue (inkompatible) Version , die von der ECMAScript Intl API stammt. Hier erklärt . Diese Antwort scheint für die alte Version gedacht zu sein.
Unten finden Sie den Code von Patrick Desjardins (alias Daok) mit einigen Kommentaren und einigen geringfügigen Änderungen:
/*
decimal_sep: character used as deciaml separtor, it defaults to '.' when omitted
thousands_sep: char used as thousands separator, it defaults to ',' when omitted
*/
Number.prototype.toMoney = function(decimals, decimal_sep, thousands_sep)
{
var n = this,
c = isNaN(decimals) ? 2 : Math.abs(decimals), //if decimal is zero we must take it, it means user does not want to show any decimal
d = decimal_sep || '.', //if no decimal separator is passed we use the dot as default decimal separator (we MUST use a decimal separator)
/*
according to [/programming/411352/how-best-to-determine-if-an-argument-is-not-sent-to-the-javascript-function]
the fastest way to check for not defined parameter is to use typeof value === 'undefined'
rather than doing value === undefined.
*/
t = (typeof thousands_sep === 'undefined') ? ',' : thousands_sep, //if you don't want to use a thousands separator you can pass empty string as thousands_sep value
sign = (n < 0) ? '-' : '',
//extracting the absolute value of the integer part of the number and converting to string
i = parseInt(n = Math.abs(n).toFixed(c)) + '',
j = ((j = i.length) > 3) ? j % 3 : 0;
return sign + (j ? i.substr(0, j) + t : '') + i.substr(j).replace(/(\d{3})(?=\d)/g, "$1" + t) + (c ? d + Math.abs(n - i).toFixed(c).slice(2) : '');
}
und hier einige Tests:
//some tests (do not forget parenthesis when using negative numbers and number with no decimals)
alert(123456789.67392.toMoney() + '\n' + 123456789.67392.toMoney(3) + '\n' + 123456789.67392.toMoney(0) + '\n' + (123456).toMoney() + '\n' + (123456).toMoney(0) + '\n' + 89.67392.toMoney() + '\n' + (89).toMoney());
//some tests (do not forget parenthesis when using negative numbers and number with no decimals)
alert((-123456789.67392).toMoney() + '\n' + (-123456789.67392).toMoney(-3));
Die geringfügigen Änderungen sind:
etwas bewegt das Math.abs(decimals)
nur zu tun ist wenn nicht NaN
.
decimal_sep
kann keine leere Zeichenfolge mehr sein (eine Art Dezimaltrennzeichen ist ein MUSS)
Wir verwenden typeof thousands_sep === 'undefined'
wie in Wie am besten vorgeschlagen, um festzustellen, ob ein Argument nicht an die JavaScript-Funktion gesendet wird
(+n || 0)
wird nicht benötigt, da this
es sich um ein Number
Objekt handelt
parseInt
wird auf den absoluten Wert des INTEGER-Teils der Zahl aufgerufen. Der INTEGER-Teil kann nicht mit NULL beginnen, es sei denn, es ist nur NULL! Und parseInt(0) === 0
entweder oktal oder dezimal.
0
als oktal betrachtet wird parseInt
. In diesem Code ist es jedoch UNMÖGLICH parseInt
, 016
als Eingabe (oder einen anderen oktalformatierten Wert) zu empfangen , da das übergebene Argument zuerst parseInt
von der Math.abs
Funktion verarbeitet wird . Es gibt also keine Möglichkeit parseInt
, eine Zahl zu erhalten, die mit Null beginnt, es sei denn, es ist nur eine Null oder 0.nn
(wo nn
sind Dezimalstellen). Aber beide 0
und 0.nn
Zeichenfolgen würden wie angenommen parseInt
in eine einfache NULL umgewandelt.
Accounting.js ist eine winzige JavaScript-Bibliothek für die Formatierung von Zahlen, Geld und Währungen.
Wenn der Betrag beispielsweise eine Zahl ist -123
, dann
amount.toLocaleString('en-US', { style: 'currency', currency: 'USD' });
wird die Zeichenfolge erzeugen "-$123.00"
.
Hier ist ein komplettes Arbeits Beispiel .
minimumFractionDigits: 0
Hier ist der beste Geldformatierer, den ich je gesehen habe:
Number.prototype.formatMoney = function(decPlaces, thouSeparator, decSeparator) {
var n = this,
decPlaces = isNaN(decPlaces = Math.abs(decPlaces)) ? 2 : decPlaces,
decSeparator = decSeparator == undefined ? "." : decSeparator,
thouSeparator = thouSeparator == undefined ? "," : thouSeparator,
sign = n < 0 ? "-" : "",
i = parseInt(n = Math.abs(+n || 0).toFixed(decPlaces)) + "",
j = (j = i.length) > 3 ? j % 3 : 0;
return sign + (j ? i.substr(0, j) + thouSeparator : "") + i.substr(j).replace(/(\d{3})(?=\d)/g, "$1" + thouSeparator) + (decPlaces ? decSeparator + Math.abs(n - i).toFixed(decPlaces).slice(2) : "");
};
Es wurde neu formatiert und von hier ausgeliehen: https://stackoverflow.com/a/149099/751484
Sie müssen Ihren eigenen Währungsbezeichner angeben (Sie haben $ oben verwendet).
Nennen Sie es so (beachten Sie jedoch, dass die Argumente standardmäßig 2, Komma und Punkt sind, sodass Sie keine Argumente angeben müssen, wenn Sie dies bevorzugen):
var myMoney=3543.75873;
var formattedMoney = '$' + myMoney.formatMoney(2,',','.'); // "$3,543.76"
var
Aussage.
Hier gibt es bereits einige gute Antworten. Hier ist ein weiterer Versuch, nur zum Spaß:
function formatDollar(num) {
var p = num.toFixed(2).split(".");
return "$" + p[0].split("").reverse().reduce(function(acc, num, i, orig) {
return num=="-" ? acc : num + (i && !(i % 3) ? "," : "") + acc;
}, "") + "." + p[1];
}
Und einige Tests:
formatDollar(45664544.23423) // "$45,664,544.23"
formatDollar(45) // "$45.00"
formatDollar(123) // "$123.00"
formatDollar(7824) // "$7,824.00"
formatDollar(1) // "$1.00"
Bearbeitet: Jetzt werden auch negative Zahlen verarbeitet
i = orig.length - i - 1
im Rückruf tun . Trotzdem eine Durchquerung des Arrays weniger.
reduce
Methode wurde in Ecmascript 1.8 eingeführt und wird in Internet Explorer 8 und niedriger nicht unterstützt.
Funktioniert für alle aktuellen Browser
Verwenden Sie toLocaleString
eine andere Währung zu formatieren in seinem sprachsensitiven Darstellung (mit ISO 4217 - Währungscodes).
(2500).toLocaleString("en-GB", {style: "currency", currency: "GBP", minimumFractionDigits: 2})
Beispiel südafrikanischer Rand-Code-Schnipsel für @avenmore
console.log((2500).toLocaleString("en-ZA", {style: "currency", currency: "ZAR", minimumFractionDigits: 2}))
// -> R 2 500,00
console.log((2500).toLocaleString("en-GB", {style: "currency", currency: "ZAR", minimumFractionDigits: 2}))
// -> ZAR 2,500.00
Ich denke was du willst ist f.nettotal.value = "$" + showValue.toFixed(2);
Numeral.js - eine js-Bibliothek zur einfachen Formatierung von Zahlen durch @adamwdraper
numeral(23456.789).format('$0,0.00'); // = "$23,456.79"
Ok, basierend auf dem, was du gesagt hast, benutze ich Folgendes:
var DecimalSeparator = Number("1.2").toLocaleString().substr(1,1);
var AmountWithCommas = Amount.toLocaleString();
var arParts = String(AmountWithCommas).split(DecimalSeparator);
var intPart = arParts[0];
var decPart = (arParts.length > 1 ? arParts[1] : '');
decPart = (decPart + '00').substr(0,2);
return '£ ' + intPart + DecimalSeparator + decPart;
Ich bin offen für Verbesserungsvorschläge (ich würde es vorziehen, YUI nicht einzuschließen, nur um dies zu tun :-)) Ich weiß bereits, dass ich das "erkennen" sollte. anstatt es nur als Dezimaltrennzeichen zu verwenden ...
Ich benutze die Bibliothek Globalize (von Microsoft):
Es ist ein großartiges Projekt, Zahlen, Währungen und Daten zu lokalisieren und sie automatisch entsprechend dem Gebietsschema des Benutzers richtig formatieren zu lassen! ... und obwohl es sich um eine jQuery-Erweiterung handeln sollte, handelt es sich derzeit um eine 100% unabhängige Bibliothek. Ich schlage Ihnen allen vor, es auszuprobieren! :) :)
Javascript-Nummer-Formatierer (früher bei Google Code )
#,##0.00
oder mit Negation -000.####
.# ##0,00
, #,###.##
, #'###.##
oder jede Art von nicht-Nummerierung Symbol.#,##,#0.000
oder #,###0.##
sind alle gültig.##,###,##.#
oder 0#,#00#.###0#
sind alle in Ordnung.format( "0.0000", 3.141592)
.(Auszug aus der README-Datei)
+1 an Jonathan M für die Bereitstellung der ursprünglichen Methode. Da dies explizit ein Währungsformatierer ist, habe ich das Währungssymbol (standardmäßig '$') zur Ausgabe hinzugefügt und ein Standardkomma als Tausendertrennzeichen hinzugefügt. Wenn Sie eigentlich kein Währungssymbol (oder Tausendertrennzeichen) möchten, verwenden Sie einfach "" (leere Zeichenfolge) als Argument dafür.
Number.prototype.formatMoney = function(decPlaces, thouSeparator, decSeparator, currencySymbol) {
// check the args and supply defaults:
decPlaces = isNaN(decPlaces = Math.abs(decPlaces)) ? 2 : decPlaces;
decSeparator = decSeparator == undefined ? "." : decSeparator;
thouSeparator = thouSeparator == undefined ? "," : thouSeparator;
currencySymbol = currencySymbol == undefined ? "$" : currencySymbol;
var n = this,
sign = n < 0 ? "-" : "",
i = parseInt(n = Math.abs(+n || 0).toFixed(decPlaces)) + "",
j = (j = i.length) > 3 ? j % 3 : 0;
return sign + currencySymbol + (j ? i.substr(0, j) + thouSeparator : "") + i.substr(j).replace(/(\d{3})(?=\d)/g, "$1" + thouSeparator) + (decPlaces ? decSeparator + Math.abs(n - i).toFixed(decPlaces).slice(2) : "");
};
+n || 0
ist das einzige, was ein bisschen seltsam erscheint (für mich jedenfalls).
this
ist ein sehr nützlicher Variablenname. Die Konvertierung in, n
damit Sie zur Definitionszeit 3 Zeichen speichern können, war möglicherweise in einer Zeit erforderlich, in der RAM und Bandbreite in KB gezählt wurden, ist jedoch in einer Zeit, in der sich der Minifier um alles kümmert, bevor er jemals die Produktion erreicht, nur verschleiert. Die anderen cleveren Mikrooptimierungen sind zumindest umstritten.
Es gibt einen Javascript-Port der PHP-Funktion "number_format".
Ich finde es sehr nützlich, da es für PHP-Entwickler einfach zu bedienen und erkennbar ist.
function number_format (number, decimals, dec_point, thousands_sep) {
var n = number, prec = decimals;
var toFixedFix = function (n,prec) {
var k = Math.pow(10,prec);
return (Math.round(n*k)/k).toString();
};
n = !isFinite(+n) ? 0 : +n;
prec = !isFinite(+prec) ? 0 : Math.abs(prec);
var sep = (typeof thousands_sep === 'undefined') ? ',' : thousands_sep;
var dec = (typeof dec_point === 'undefined') ? '.' : dec_point;
var s = (prec > 0) ? toFixedFix(n, prec) : toFixedFix(Math.round(n), prec);
//fix for IE parseFloat(0.55).toFixed(0) = 0;
var abs = toFixedFix(Math.abs(n), prec);
var _, i;
if (abs >= 1000) {
_ = abs.split(/\D/);
i = _[0].length % 3 || 3;
_[0] = s.slice(0,i + (n < 0)) +
_[0].slice(i).replace(/(\d{3})/g, sep+'$1');
s = _.join(dec);
} else {
s = s.replace('.', dec);
}
var decPos = s.indexOf(dec);
if (prec >= 1 && decPos !== -1 && (s.length-decPos-1) < prec) {
s += new Array(prec-(s.length-decPos-1)).join(0)+'0';
}
else if (prec >= 1 && decPos === -1) {
s += dec+new Array(prec).join(0)+'0';
}
return s;
}
(Kommentarblock vom Original , unten für Beispiele und Gutschrift, wo fällig)
// Formats a number with grouped thousands
//
// version: 906.1806
// discuss at: http://phpjs.org/functions/number_format
// + original by: Jonas Raoni Soares Silva (http://www.jsfromhell.com)
// + improved by: Kevin van Zonneveld (http://kevin.vanzonneveld.net)
// + bugfix by: Michael White (http://getsprink.com)
// + bugfix by: Benjamin Lupton
// + bugfix by: Allan Jensen (http://www.winternet.no)
// + revised by: Jonas Raoni Soares Silva (http://www.jsfromhell.com)
// + bugfix by: Howard Yeend
// + revised by: Luke Smith (http://lucassmith.name)
// + bugfix by: Diogo Resende
// + bugfix by: Rival
// + input by: Kheang Hok Chin (http://www.distantia.ca/)
// + improved by: davook
// + improved by: Brett Zamir (http://brett-zamir.me)
// + input by: Jay Klehr
// + improved by: Brett Zamir (http://brett-zamir.me)
// + input by: Amir Habibi (http://www.residence-mixte.com/)
// + bugfix by: Brett Zamir (http://brett-zamir.me)
// * example 1: number_format(1234.56);
// * returns 1: '1,235'
// * example 2: number_format(1234.56, 2, ',', ' ');
// * returns 2: '1 234,56'
// * example 3: number_format(1234.5678, 2, '.', '');
// * returns 3: '1234.57'
// * example 4: number_format(67, 2, ',', '.');
// * returns 4: '67,00'
// * example 5: number_format(1000);
// * returns 5: '1,000'
// * example 6: number_format(67.311, 2);
// * returns 6: '67.31'
// * example 7: number_format(1000.55, 1);
// * returns 7: '1,000.6'
// * example 8: number_format(67000, 5, ',', '.');
// * returns 8: '67.000,00000'
// * example 9: number_format(0.9, 0);
// * returns 9: '1'
// * example 10: number_format('1.20', 2);
// * returns 10: '1.20'
// * example 11: number_format('1.20', 4);
// * returns 11: '1.2000'
// * example 12: number_format('1.2000', 3);
// * returns 12: '1.200'
Eine kürzere Methode (zum Einfügen von Leerzeichen, Komma oder Punkt) mit regulärem Ausdruck?
Number.prototype.toCurrencyString=function(){
return this.toFixed(2).replace(/(\d)(?=(\d{3})+\b)/g,'$1 ');
}
n=12345678.9;
alert(n.toCurrencyString());
Ich habe so etwas noch nicht gesehen. Es ist ziemlich prägnant und leicht zu verstehen.
function moneyFormat(price, sign = '$') {
const pieces = parseFloat(price).toFixed(2).split('')
let ii = pieces.length - 3
while ((ii-=3) > 0) {
pieces.splice(ii, 0, ',')
}
return sign + pieces.join('')
}
console.log(
moneyFormat(100),
moneyFormat(1000),
moneyFormat(10000.00),
moneyFormat(1000000000000000000)
)
Hier ist eine Version mit mehr Optionen in der endgültigen Ausgabe, um die Formatierung verschiedener Währungen in verschiedenen Lokalitätsformaten zu ermöglichen.
// higher order function that takes options then a price and will return the formatted price
const makeMoneyFormatter = ({
sign = '$',
delimiter = ',',
decimal = '.',
append = false,
precision = 2,
round = true,
custom
} = {}) => value => {
const e = [1, 10, 100, 1000, 10000, 100000, 1000000, 10000000]
value = round
? (Math.round(value * e[precision]) / e[precision])
: parseFloat(value)
const pieces = value
.toFixed(precision)
.replace('.', decimal)
.split('')
let ii = pieces.length - (precision ? precision + 1 : 0)
while ((ii-=3) > 0) {
pieces.splice(ii, 0, delimiter)
}
if (typeof custom === 'function') {
return custom({
sign,
float: value,
value: pieces.join('')
})
}
return append
? pieces.join('') + sign
: sign + pieces.join('')
}
// create currency converters with the correct formatting options
const formatDollar = makeMoneyFormatter()
const formatPound = makeMoneyFormatter({
sign: '£',
precision: 0
})
const formatEuro = makeMoneyFormatter({
sign: '€',
delimiter: '.',
decimal: ',',
append: true
})
const customFormat = makeMoneyFormatter({
round: false,
custom: ({ value, float, sign }) => `SALE:$${value}USD`
})
console.log(
formatPound(1000),
formatDollar(10000.0066),
formatEuro(100000.001),
customFormat(999999.555)
)
Die Antwort von Patrick Desjardins sieht gut aus, aber ich bevorzuge mein einfaches Javascript. Hier ist eine Funktion, die ich gerade geschrieben habe, um eine Zahl aufzunehmen und im Währungsformat zurückzugeben (abzüglich des Dollarzeichens).
// Format numbers to two decimals with commas
function formatDollar(num) {
var p = num.toFixed(2).split(".");
var chars = p[0].split("").reverse();
var newstr = '';
var count = 0;
for (x in chars) {
count++;
if(count%3 == 1 && count != 1) {
newstr = chars[x] + ',' + newstr;
} else {
newstr = chars[x] + newstr;
}
}
return newstr + "." + p[1];
}
Der Hauptteil besteht darin, die Tausendertrennzeichen einzufügen, was folgendermaßen geschehen könnte:
<script type="text/javascript">
function ins1000Sep(val){
val = val.split(".");
val[0] = val[0].split("").reverse().join("");
val[0] = val[0].replace(/(\d{3})/g,"$1,");
val[0] = val[0].split("").reverse().join("");
val[0] = val[0].indexOf(",")==0?val[0].substring(1):val[0];
return val.join(".");
}
function rem1000Sep(val){
return val.replace(/,/g,"");
}
function formatNum(val){
val = Math.round(val*100)/100;
val = (""+val).indexOf(".")>-1 ? val + "00" : val + ".00";
var dec = val.indexOf(".");
return dec == val.length-3 || dec == 0 ? val : val.substring(0,dec+3);
}
</script>
<button onclick="alert(ins1000Sep(formatNum(12313231)));">
Es gibt ein eingebautes function
toFixed injavascript
var num = new Number(349);
document.write("$" + num.toFixed(2));
toFixed()
toFixed()
ist eine Funktion des Number
Objekts und funktioniert nicht, var num
wenn es eine war String
, daher hat mir der zusätzliche Kontext geholfen.
function CurrencyFormatted(amount)
{
var i = parseFloat(amount);
if(isNaN(i)) { i = 0.00; }
var minus = '';
if(i < 0) { minus = '-'; }
i = Math.abs(i);
i = parseInt((i + .005) * 100);
i = i / 100;
s = new String(i);
if(s.indexOf('.') < 0) { s += '.00'; }
if(s.indexOf('.') == (s.length - 2)) { s += '0'; }
s = minus + s;
return s;
}
Von WillMaster .
Ich schlage die NumberFormat-Klasse aus der Google Visualization API vor .
Sie können so etwas tun:
var formatter = new google.visualization.NumberFormat({
prefix: '$',
pattern: '#,###,###.##'
});
formatter.formatValue(1000000); // $ 1,000,000
Ich hoffe, es hilft.
Dies mag etwas spät sein, aber hier ist eine Methode, die ich gerade für einen Kollegen ausgearbeitet habe, um ein Gebietsschema hinzuzufügen .toCurrencyString()
allen Zahlen Funktion berücksichtigt. Die Internalisierung dient nur der Nummerngruppierung, NICHT dem Währungszeichen. Wenn Sie Dollar ausgeben, verwenden Sie diese "$"
wie angegeben, da $123 4567
in Japan oder China dieselbe USD-Zahl wie $1,234,567
hier in den USA vorhanden ist. Wenn Sie Euro / etc. Ausgeben, ändern Sie das Währungszeichen von "$"
.
Deklarieren Sie dies irgendwo in Ihrem KOPF oder wo immer nötig, kurz bevor Sie es verwenden müssen:
Number.prototype.toCurrencyString = function(prefix, suffix) {
if (typeof prefix === 'undefined') { prefix = '$'; }
if (typeof suffix === 'undefined') { suffix = ''; }
var _localeBug = new RegExp((1).toLocaleString().replace(/^1/, '').replace(/\./, '\\.') + "$");
return prefix + (~~this).toLocaleString().replace(_localeBug, '') + (this % 1).toFixed(2).toLocaleString().replace(/^[+-]?0+/,'') + suffix;
}
Dann bist du fertig! Verwenden (number).toCurrencyString()
Sie diese Option überall dort, wo Sie die Nummer als Währung ausgeben müssen.
var MyNumber = 123456789.125;
alert(MyNumber.toCurrencyString()); // alerts "$123,456,789.13"
MyNumber = -123.567;
alert(MyNumber.toCurrencyString()); // alerts "$-123.57"
Wie gewöhnlich gibt es mehrere Möglichkeiten, dasselbe zu tun, aber ich würde es vermeiden, es zu verwenden Number.prototype.toLocaleString
es zu verwenden da es je nach Benutzereinstellungen unterschiedliche Werte zurückgeben kann.
Ich empfehle auch nicht, die Number.prototype
Prototypen von nativen Objekten zu erweitern. Dies ist eine schlechte Praxis, da dies zu Konflikten mit dem Code anderer Personen (z. B. Bibliotheken / Frameworks / Plugins) führen kann und möglicherweise nicht mit zukünftigen JavaScript-Implementierungen / -Versionen kompatibel ist.
Ich glaube, dass reguläre Ausdrücke der beste Ansatz für das Problem sind. Hier ist meine Implementierung:
/**
* Converts number into currency format
* @param {number} number Number that should be converted.
* @param {string} [decimalSeparator] Decimal separator, defaults to '.'.
* @param {string} [thousandsSeparator] Thousands separator, defaults to ','.
* @param {int} [nDecimalDigits] Number of decimal digits, defaults to `2`.
* @return {string} Formatted string (e.g. numberToCurrency(12345.67) returns '12,345.67')
*/
function numberToCurrency(number, decimalSeparator, thousandsSeparator, nDecimalDigits){
//default values
decimalSeparator = decimalSeparator || '.';
thousandsSeparator = thousandsSeparator || ',';
nDecimalDigits = nDecimalDigits == null? 2 : nDecimalDigits;
var fixed = number.toFixed(nDecimalDigits), //limit/add decimal digits
parts = new RegExp('^(-?\\d{1,3})((?:\\d{3})+)(\\.(\\d{'+ nDecimalDigits +'}))?$').exec( fixed ); //separate begin [$1], middle [$2] and decimal digits [$4]
if(parts){ //number >= 1000 || number <= -1000
return parts[1] + parts[2].replace(/\d{3}/g, thousandsSeparator + '$&') + (parts[4] ? decimalSeparator + parts[4] : '');
}else{
return fixed.replace('.', decimalSeparator);
}
}
bearbeitet am 30.08.2010: Option zum Festlegen der Anzahl der Dezimalstellen hinzugefügt. bearbeitet am 23.08.2011: Option hinzugefügt, um die Anzahl der Dezimalstellen auf Null zu setzen.
Hier sind einige Lösungen, die alle die Testsuite, die Testsuite und den Benchmark bestehen. Wenn Sie zum Testen kopieren und einfügen möchten, probieren Sie This Gist aus .
Basieren Sie auf https://stackoverflow.com/a/14428340/1877620 , aber korrigieren Sie, wenn kein Dezimalpunkt vorhanden ist.
if (typeof Number.prototype.format === 'undefined') {
Number.prototype.format = function (precision) {
if (!isFinite(this)) {
return this.toString();
}
var a = this.toFixed(precision).split('.');
a[0] = a[0].replace(/\d(?=(\d{3})+$)/g, '$&,');
return a.join('.');
}
}
if (typeof Number.prototype.format === 'undefined') {
Number.prototype.format = function (precision) {
if (!isFinite(this)) {
return this.toString();
}
var a = this.toFixed(precision).split('.'),
// skip the '-' sign
head = Number(this < 0);
// skip the digits that's before the first thousands separator
head += (a[0].length - head) % 3 || 3;
a[0] = a[0].slice(0, head) + a[0].slice(head).replace(/\d{3}/g, ',$&');
return a.join('.');
};
}
if (typeof Number.prototype.format === 'undefined') {
Number.prototype.format = function (precision) {
if (!isFinite(this)) {
return this.toString();
}
var a = this.toFixed(precision).split('.');
a[0] = a[0]
.split('').reverse().join('')
.replace(/\d{3}(?=\d)/g, '$&,')
.split('').reverse().join('');
return a.join('.');
};
}
if (typeof Number.prototype.format === 'undefined') {
Number.prototype.format = function (precision) {
if (!isFinite(this)) {
return this.toString();
}
var a = this.toFixed(precision).split('');
a.push('.');
var i = a.indexOf('.') - 3;
while (i > 0 && a[i-1] !== '-') {
a.splice(i, 0, ',');
i -= 3;
}
a.pop();
return a.join('');
};
}
console.log('======== Demo ========')
console.log(
(1234567).format(0),
(1234.56).format(2),
(-1234.56).format(0)
);
var n = 0;
for (var i=1; i<20; i++) {
n = (n * 10) + (i % 10)/100;
console.log(n.format(2), (-n).format(2));
}
Wenn wir ein benutzerdefiniertes Tausender- oder Dezimaltrennzeichen möchten, verwenden Sie replace()
:
123456.78.format(2).replace(',', ' ').replace('.', ' ');
function assertEqual(a, b) {
if (a !== b) {
throw a + ' !== ' + b;
}
}
function test(format_function) {
console.log(format_function);
assertEqual('NaN', format_function.call(NaN, 0))
assertEqual('Infinity', format_function.call(Infinity, 0))
assertEqual('-Infinity', format_function.call(-Infinity, 0))
assertEqual('0', format_function.call(0, 0))
assertEqual('0.00', format_function.call(0, 2))
assertEqual('1', format_function.call(1, 0))
assertEqual('-1', format_function.call(-1, 0))
// decimal padding
assertEqual('1.00', format_function.call(1, 2))
assertEqual('-1.00', format_function.call(-1, 2))
// decimal rounding
assertEqual('0.12', format_function.call(0.123456, 2))
assertEqual('0.1235', format_function.call(0.123456, 4))
assertEqual('-0.12', format_function.call(-0.123456, 2))
assertEqual('-0.1235', format_function.call(-0.123456, 4))
// thousands separator
assertEqual('1,234', format_function.call(1234.123456, 0))
assertEqual('12,345', format_function.call(12345.123456, 0))
assertEqual('123,456', format_function.call(123456.123456, 0))
assertEqual('1,234,567', format_function.call(1234567.123456, 0))
assertEqual('12,345,678', format_function.call(12345678.123456, 0))
assertEqual('123,456,789', format_function.call(123456789.123456, 0))
assertEqual('-1,234', format_function.call(-1234.123456, 0))
assertEqual('-12,345', format_function.call(-12345.123456, 0))
assertEqual('-123,456', format_function.call(-123456.123456, 0))
assertEqual('-1,234,567', format_function.call(-1234567.123456, 0))
assertEqual('-12,345,678', format_function.call(-12345678.123456, 0))
assertEqual('-123,456,789', format_function.call(-123456789.123456, 0))
// thousands separator and decimal
assertEqual('1,234.12', format_function.call(1234.123456, 2))
assertEqual('12,345.12', format_function.call(12345.123456, 2))
assertEqual('123,456.12', format_function.call(123456.123456, 2))
assertEqual('1,234,567.12', format_function.call(1234567.123456, 2))
assertEqual('12,345,678.12', format_function.call(12345678.123456, 2))
assertEqual('123,456,789.12', format_function.call(123456789.123456, 2))
assertEqual('-1,234.12', format_function.call(-1234.123456, 2))
assertEqual('-12,345.12', format_function.call(-12345.123456, 2))
assertEqual('-123,456.12', format_function.call(-123456.123456, 2))
assertEqual('-1,234,567.12', format_function.call(-1234567.123456, 2))
assertEqual('-12,345,678.12', format_function.call(-12345678.123456, 2))
assertEqual('-123,456,789.12', format_function.call(-123456789.123456, 2))
}
console.log('======== Testing ========');
test(Number.prototype.format);
test(Number.prototype.format1);
test(Number.prototype.format2);
test(Number.prototype.format3);
function benchmark(f) {
var start = new Date().getTime();
f();
return new Date().getTime() - start;
}
function benchmark_format(f) {
console.log(f);
time = benchmark(function () {
for (var i = 0; i < 100000; i++) {
f.call(123456789, 0);
f.call(123456789, 2);
}
});
console.log(time.format(0) + 'ms');
}
// if not using async, browser will stop responding while running.
// this will create a new thread to benchmark
async = [];
function next() {
setTimeout(function () {
f = async.shift();
f && f();
next();
}, 10);
}
console.log('======== Benchmark ========');
async.push(function () { benchmark_format(Number.prototype.format); });
next();
Number(value)
.toFixed(2)
.replace(/(\d)(?=(\d{3})+(?!\d))/g, "$1,")
Eine einfache Option für die korrekte Platzierung von Kommas, indem Sie zuerst die Zeichenfolge und den regulären regulären Ausdruck umkehren.
String.prototype.reverse = function() {
return this.split('').reverse().join('');
};
Number.prototype.toCurrency = function( round_decimal /*boolean*/ ) {
// format decimal or round to nearest integer
var n = this.toFixed( round_decimal ? 0 : 2 );
// convert to a string, add commas every 3 digits from left to right
// by reversing string
return (n + '').reverse().replace( /(\d{3})(?=\d)/g, '$1,' ).reverse();
};
Ich fand dies von: accounting.js . Es ist sehr einfach und passt perfekt zu meinen Bedürfnissen.
// Default usage:
accounting.formatMoney(12345678); // $12,345,678.00
// European formatting (custom symbol and separators), can also use options object as second parameter:
accounting.formatMoney(4999.99, "€", 2, ".", ","); // €4.999,99
// Negative values can be formatted nicely:
accounting.formatMoney(-500000, "£ ", 0); // £ -500,000
// Simple `format` string allows control of symbol position (%v = value, %s = symbol):
accounting.formatMoney(5318008, { symbol: "GBP", format: "%v %s" }); // 5,318,008.00 GBP
// Euro currency symbol to the right
accounting.formatMoney(5318008, {symbol: "€", precision: 2, thousand: ".", decimal : ",", format: "%v%s"}); // 1.008,00€
formatNumber
in Javascript