Sformatuj liczbę, aby zawsze pokazywać 2 miejsca dziesiętne

781

Chciałbym sformatować moje liczby, aby zawsze wyświetlały 2 miejsca po przecinku, w stosownych przypadkach zaokrąglając.

Przykłady:

number     display
------     -------
1          1.00
1.341      1.34
1.345      1.35

Korzystałem z tego:

parseFloat(num).toFixed(2);

Ale wyświetla się raczej 1jako .11.00

Varada
źródło
2
Mam na myśli, że jeśli wprowadzę 1, to nie pokaże liczby jako 1,00, ale jeśli wprowadzę 1,345, to pokaże 1,35
Varada
1
Przeredagowałem twoje pytanie na to, czego według ciebie szukałeś. Sprawdź, czy dobrze cię zrozumiałem.
zanurzenie
precyzyjne zaokrąglanie z np. wsparciem gist.github.com/ArminVieweg/28647e735aa6efaba401
TarranJones 18.09.2015
Możliwy duplikat formatowania liczby z dokładnie dwoma
miejscami po

Odpowiedzi:

1116
(Math.round(num * 100) / 100).toFixed(2);

Demo na żywo

Zauważ, że zaokrągli to do 2 miejsc po przecinku, więc dane wejściowe 1.346powrócą 1.35.

popychadło
źródło
6
@Kooilnc: OP chce 1wyświetlać jako 1.00i 1.341wyświetlać jako 1.34.
drudge
49
Nie ma potrzeby używania round (), ponieważ toFixed () zaokrągla to.
Milan Babuškov,
27
toFixed () robi to zaokrągla, ale nie zapominaj, że zwraca ciąg ... Więc ta metoda jest naprawdę przydatna tylko do wyświetlania. Jeśli chcesz wykonać dalsze obliczenia matematyczne na zaokrąglonej wartości, nie używaj toFixed ().
TWright
8
według MDN Math.round nie zawsze daje dokładne wyniki z powodu błędów zaokrąglania. Testowałem to z 1.005, co powinno zaokrąglić do 1.01, ale daje 1.00. Skorzystaj z mojej odpowiedzi, aby zachować stałą dokładność: stackoverflow.com/a/34796988/3549440 .
Nate
13
Całą odpowiedź można sprowadzić do (+num).toFixed(2). Zachowuje nawet błąd zaokrąglania w oryginale, patrz odpowiedź Nate'a .
RobG
321
Number(1).toFixed(2);         // 1.00
Number(1.341).toFixed(2);     // 1.34
Number(1.345).toFixed(2);     // 1.34 NOTE: See andy's comment below.
Number(1.3450001).toFixed(2); // 1.35

Abel ANEIROS
źródło
1
Ostatnia linia to fałsz. Próbowałem tego w konsoli Chrome i `` Number (1.365) .toFixed (2) zwraca „1.37”
Andre
1
@Andre, Chrome 29.0.1547.57 daje mi 1.34wyraz Number(1.345).toFixed(2).
Drew Noakes,
1
toFixed wykonuje zaokrąglanie, które można zobaczyć na prawie każdym numerze testu.
andy
40
Przypadkowo przesłany ten ostatni komentarz przed zakończeniem .. 1.345jest przykładem liczby, której nie można zapisać dokładnie w liczbach zmiennoprzecinkowych, więc myślę, że powodem tego, że nie zaokrągla się tak, jak się spodziewasz, jest fakt, że jest ona lekko przechowywana jako liczba mniej niż 1.345 i zaokrągla w dół. Jeśli zamiast testować przy (1.34500001).toFixed(2)czym widać, że poprawnie zaokrągla się do1.35
Andy
94

Ta odpowiedź nie powiedzie się, jeślivalue = 1.005 .

Jako lepsze rozwiązanie problemu zaokrąglania można uniknąć, używając liczb reprezentowanych w notacji wykładniczej:

Number(Math.round(1.005+'e2')+'e-2'); // 1.01

Kod czyszczący zgodnie z sugestią @Kon i oryginalnego autora:

Number(Math.round(parseFloat(value + 'e' + decimalPlaces)) + 'e-' + decimalPlaces)

Możesz dodać toFixed()na końcu, aby zachować kropkę dziesiętną np .: 1.00ale pamiętaj, że zwróci ona jako ciąg znaków.

Number(Math.round(parseFloat(value + 'e' + decimalPlaces)) + 'e-' + decimalPlaces).toFixed(decimalPlaces)

Źródło : Zaokrąglanie miejsc po przecinku w JavaScript

od razu
źródło
13
O dziwo, wszyscy inni tutaj nie zauważyli, że toFixedma ten problem z zaokrąglaniem. Twoja odpowiedź powinna być zaakceptowana.
Armfoot
1
Właśnie przetestowałem, czy nadal tak jest. nadal masz poprawność do wersji Chrome 59.0.3071.115 Twoje rozwiązanie zaokrągli w górę dla 1.005 (1.01) i zaokrągli w dół do 1.00499999 (1.00)
Artistan
jsfiddle.net/Artistan/qq895bnp/28 są „czasy”, kiedy toFixed zadziała, ale jest to dość niespójne. :)
Artistan
surround Liczba w parseFloat jest
zwracanym
1
To solidna odpowiedź. Kilka ulepszeń, które mogę wymyślić: (1) VS Code (plik TypeScript) nie lubi Math.round () przechodzącego przez ciąg. (2) Uczyń liczbę miejsc dziesiętnych dynamicznymi (nie zakodowanymi na stałe do 2). (3) toFixed () wydaje się niepotrzebne. Więc wymyśliłemNumber(Math.round(parseFloat(value + 'e' + decimalPlaces)) + 'e-' + decimalPlaces)
Kon
23
var num = new Number(14.12);
console.log(num.toPrecision(2));//outputs 14
console.log(num.toPrecision(3));//outputs 14.1
console.log(num.toPrecision(4));//outputs 14.12
console.log(num.toPrecision(5));//outputs 14.120
Tiberiu Petcu
źródło
Daje to nieoczekiwane wyniki, jeśli liczba może wynosić 1,4, 23,654 i 0, jaką precyzję byś przyjął?
shinzou
2
Uwaga: OP prosi o „zaokrąglenie, w stosownych przypadkach” . toPrecisionformatuje liczbę tylko do określonej liczby miejsc po przecinku, po prostu pomijając zbędne miejsca, ale nie zaokrąglając ich . Oczywiście może to być bardzo przydatne, ale ważne jest, aby zrozumieć różnicę.
Boaz - Przywróć Monikę
1
Według Mozilli właściwie toPrecision robi zaokrąglenia. Test:(20.55).toPrecision(3) "20.6"
James L.,
2
Jeśli chcesz usunąć końcowe zera , rzuć go na Liczba lub Liczba zmiennoprzecinkowa po użyciu toFixed: const formattedVal = Number(val.toFixed(2));Nie używaj toPrecision, ponieważ zlicza liczby nie dziesiętne przy użyciu parametru dokładności.
James L.,
17

Aby uzyskać najdokładniejsze zaokrąglenie, utwórz tę funkcję:

function round(value, decimals) {
    return Number(Math.round(value +'e'+ decimals) +'e-'+ decimals).toFixed(decimals);
}

i użyj go, aby zaokrąglić do 2 miejsc po przecinku:

console.log("seeked to " + round(1.005, 2));
> 1.01

Dzięki Razu , ten artykuł i odniesienie Math.round MDN .

Nate
źródło
1
co z 1.0049999999999998934?
4esn0k,
1
Nie wykracza poza 2 dp
Stephen Adelakun
1
jsfiddle.net/Artistan/qq895bnp przetestowany, jest to jedyna spójna metoda, jaką widziałem. Dzięki.
Artistan
16

W przypadku nowoczesnych przeglądarek użyj toLocaleString:

var num = 1.345;
num.toLocaleString(undefined, { maximumFractionDigits: 2, minimumFractionDigits: 2 });

Jako pierwszy parametr określ znacznik lokalizacji, aby kontrolować separator dziesiętny . Dla kropki użyj na przykład ustawień regionalnych w języku angielskim w USA:

num.toLocaleString("en-US", { maximumFractionDigits: 2, minimumFractionDigits: 2 });

co daje:

1,35

Większość krajów w Europie używa przecinka jako separatora dziesiętnego, więc jeśli na przykład używasz ustawień narodowych w Szwecji / Szwecji:

num.toLocaleString("sv-SE", { maximumFractionDigits: 2, minimumFractionDigits: 2 });

da:

1,35

holmis83
źródło
Nie jestem pewien, dlaczego jest to przegłosowane, wydawało mi się, że działa dobrze. Dodaj komentarz, jeśli chcesz głosować, jeśli coś jest nie tak!
John Culviner,
13

Najprostsza odpowiedź:

var num = 1.2353453;
num.toFixed(2); // 1.24

Przykład: http://jsfiddle.net/E2XU7/

macio.Jun
źródło
11
Cóż, toFixedzostało już zasugerowane w stackoverflow.com/a/13292833/218196 . Jakie dodatkowe informacje zawiera twoje pytanie?
Felix Kling
ta odpowiedź nie obejmuje okrągłej funkcjonalności, moja odpowiedź obejmuje tys.
macio.
8
Co? To dokładnie ta sama odpowiedź. Dzwonię toFixedna numer.
Felix Kling,
1
Prawidłowa, ta sama funkcja, ale wynik tej odpowiedzi jest mylący, właśnie ją poprawiłem, wyrażając okrągłą funkcjonalność.
macio.
Pytanie brzmi: „... w stosownych przypadkach zaokrąglanie”. Twoja odpowiedź nie obejmuje zaokrąglania.
Chris
12

O wiele bardziej ogólne rozwiązanie zaokrąglania do N miejsc

function roundN(num,n){
  return parseFloat(Math.round(num * Math.pow(10, n)) /Math.pow(10,n)).toFixed(n);
}


console.log(roundN(1,2))
console.log(roundN(1.34,2))
console.log(roundN(1.35,2))
console.log(roundN(1.344,2))
console.log(roundN(1.345,2))
console.log(roundN(1.344,3))
console.log(roundN(1.345,3))
console.log(roundN(1.3444,3))
console.log(roundN(1.3455,3))

Output

1.00
1.34
1.35
1.34
1.35
1.344
1.345
1.344
1.346
PirateApp
źródło
1
Ten alswer kończy się niepowodzeniem z pewnymi liczbami zbliżonymi do 0, roundN(-3.4028230607370965e+38,2)zwraca "-3.4028230607370965e+38"zamiast oczekiwanego 0,00
Ferrybig 17.04.19
ciekawe @Ferrybig Będę testować wspomniane liczby i wymyślić obejście, dzięki za testowanie
PirateApp
1
Zauważ, że wcześniej wspomniana liczba nie powinna pokazywać zera, ale ogromna liczba, to był tylko błąd w moim mózgu. Ale nadal nie działa, ponieważ nadal nie pokazuje 2 miejsc po przecinku
Ferrybig
9

Jeśli już używasz jQuery, możesz spojrzeć na użycie formatu liczb jQuery wtyczki .

Wtyczka może zwracać sformatowane liczby w postaci łańcucha, można ustawić separatory dziesiętne i tysiące, a także wybrać liczbę wyświetlanych miejsc po przecinku.

$.number( 123, 2 ); // Returns '123.00'

Możesz także uzyskać format liczb jQuery z GitHub .

Sam Sehnert
źródło
11
Używanie wtyczki „po prostu ma stałą część dziesiętną” to przesada.
Lashae,
9
@Lashae, jasne, jeśli to wszystko, co chcesz zrobić. Opublikowałem to na wypadek, gdyby OP lub ktokolwiek inny chciał dodatkowej funkcjonalności, którą zapewnia również wtyczka.
Sam Sehnert
jeśli plakat pytania dodał tag jQuery;)
fullstacklife
7

Czy to masz na myśli?

function showAsFloat(num, n){
      return !isNaN(+num) ? (+num).toFixed(n || 2) : num;
}

document.querySelector('#result').textContent = 
    [
     'command                      | result',
     '-----------------------------------------------',
     'showAsFloat(1);              | ' + showAsFloat(1),
     'showAsFloat(1.314);          | ' + showAsFloat(1.314),
     'showAsFloat(\'notanumber\')    | ' + showAsFloat('notanumber'),
     'showAsFloat(\'23.44567\', 3)   | ' + showAsFloat('23.44567', 3),
     'showAsFloat(2456198, 5)      | ' + showAsFloat('2456198', 5),
     'showAsFloat(0);              | ' + showAsFloat(0)
    ].join('\n');
<pre id="result"></pre>

KooiInc
źródło
6

Konwertuj liczbę na ciąg znaków, zachowując tylko dwa miejsca po przecinku:

var num = 5.56789;
var n = num.toFixed(2);

Wynikiem n będzie:

5.57
Behnam Mohammadi
źródło
4

Szukasz podłogi?

var num = 1.42482;
var num2 = 1;
var fnum = Math.floor(num).toFixed(2);
var fnum2 = Math.floor(num2).toFixed(2);
alert(fnum + " and " + fnum2); //both values will be 1.00
samwise
źródło
4
Nie sądzę, że chce zaokrąglić w dół do najbliższej liczby całkowitej.
zanurzenie
tak, nie byłam pewna z opisu, ale po prostu go tam
wyrzucałam
3
function currencyFormat (num) {
    return "$" + num.toFixed(2).replace(/(\d)(?=(\d{3})+(?!\d))/g, "$1,")
}

console.info(currencyFormat(2665));   // $2,665.00
console.info(currencyFormat(102665)); // $102,665.00
Nr Ar
źródło
3

Oto także ogólna funkcja, która może formatować do dowolnej liczby miejsc po przecinku:

function numberFormat(val, decimalPlaces) {

    var multiplier = Math.pow(10, decimalPlaces);
    return (Math.round(val * multiplier) / multiplier).toFixed(decimalPlaces);
}
Minas Mina
źródło
3

Tam, gdzie wymagane jest określone formatowanie, powinieneś napisać własną procedurę lub użyć funkcji biblioteki, która robi to, czego potrzebujesz. Podstawowa funkcjonalność ECMAScript jest zwykle niewystarczająca do wyświetlania sformatowanych liczb.

Dokładne wyjaśnienie zaokrąglania i formatowania znajduje się tutaj: http://www.merlyn.demon.co.uk/js-round.htm#RiJ

Zasadniczo zaokrąglanie i formatowanie powinno być wykonywane jako ostatni krok przed wyjściem. Zrobienie tego wcześniej może spowodować nieoczekiwanie duże błędy i zniszczyć formatowanie.

RobG
źródło
Są chwile, kiedy kręcę głową według własnego wyboru, aby w tak głębokim stopniu zaangażować się w tę platformę JS / Ecma. :( "Tam, gdzie wymagane jest określone formatowanie, powinieneś napisać własną procedurę lub użyć funkcji biblioteki, która robi to, czego potrzebujesz. Podstawowa funkcjonalność ECMAScript jest zwykle niewystarczająca do wyświetlania sformatowanych liczb." Co za asinine instrukcja - nie że ją stworzyłeś, ale ponieważ ten fakt istnieje. Po prostu smutne. Wracaj do gry, Javascript! :)
ChrisH
2

function number_format(string,decimals=2,decimal=',',thousands='.',pre='R$ ',pos=' Reais'){
  var numbers = string.toString().match(/\d+/g).join([]);
  numbers = numbers.padStart(decimals+1, "0");
  var splitNumbers = numbers.split("").reverse();
  var mask = '';
  splitNumbers.forEach(function(d,i){
    if (i == decimals) { mask = decimal + mask; }
    if (i>(decimals+1) && ((i-2)%(decimals+1))==0) { mask = thousands + mask; }
    mask = d + mask;
  });
  return pre + mask + pos;
}
var element = document.getElementById("format");
var money= number_format("10987654321",2,',','.');
element.innerHTML = money;
#format{
display:inline-block;
padding:10px;
border:1px solid #ddd;
background:#f5f5f5;
}
<div id='format'>Test 123456789</div>

Leonardo Filipe
źródło
2

Wystarczy natknąć się na ten jeden z najdłuższych wątków, poniżej znajduje się moje rozwiązanie:

parseFloat(Math.round((parseFloat(num * 100)).toFixed(2)) / 100 ).toFixed(2)

Daj mi znać, jeśli ktoś może zrobić dziurę

Sam Johnson
źródło
2

Ehtesham Ahmad Nadim
źródło
2
Ten fragment kodu wystarczy, aby osiągnąć swoje wymagania parseFloat(num.toFixed(2))
kVA
1

Nie dajesz nam całego obrazu.

javascript:alert(parseFloat(1).toFixed(2))pokazuje 1,00 w moich przeglądarkach po wklejeniu go do paska lokalizacji. Jeśli jednak później coś z tym zrobisz, nastąpi powrót.

var num = 2
document.getElementById('spanId').innerHTML=(parseFloat(num).toFixed(2)-1)


shows 1 and not 1.00
mplungjan
źródło
Działa w FF 50, Chrome 49 i IE 8
Florian Straub
1
var quantity = 12;

var import1 = 12.55;

var total = quantity * import1;

var answer = parseFloat(total).toFixed(2);

document.write(answer);
Darszak Szekda
źródło
1

Musiałem zdecydować między konwersjami parseFloat () i Number (), zanim mogłem wykonać wywołanie toFixed (). Oto przykład formatowania liczb po wprowadzeniu danych przez użytkownika.

HTML:

<input type="number" class="dec-number" min="0" step="0.01" />

Obsługa zdarzeń:

$('.dec-number').on('change', function () {
     const value = $(this).val();
     $(this).val(value.toFixed(2));
});

Powyższy kod spowoduje wyjątek TypeError. Zauważ, że chociaż typem wejściowym HTML jest „liczba”, to dane wejściowe użytkownika są w rzeczywistości typem danych „ciąg”. Jednak funkcję toFixed () można wywołać tylko dla obiektu, który jest liczbą.

Mój końcowy kod wyglądałby następująco:

$('.dec-number').on('change', function () {
     const value = Number($(this).val());
     $(this).val(value.toFixed(2));
});

Powodem, dla którego wolę rzutować za pomocą Number () vs. parseFloat (), jest to, że nie muszę wykonywać dodatkowej weryfikacji ani dla pustego ciągu wejściowego, ani dla wartości NaN. Funkcja Number () automatycznie obsłuży pusty ciąg i ukryje go do zera.

vitek
źródło
0

Lubię:

var num = 12.749;
parseFloat((Math.round(num * 100) / 100).toFixed(2)); // 123.75

Zaokrąglij liczbę za pomocą 2 kropek dziesiętnych, a następnie parsuj ją, parseFloat() aby zwrócić Number, a nie String, chyba że nie przejmujesz się, czy jest to String czy Number.

Yuichi
źródło
Sądzę, że jeśli celem było wyświetlanie z dokładnością do dwóch miejsc po przecinku, parsowanie zmiennoprzecinkowe będzie z tym bałaganem. Np.parseFloat("1.00") // 1
Stijn de Witt
0

Rozszerz obiekt Math metodą precyzyjną

Object.defineProperty(Math, 'precision',{
   value: function (value,precision,type){
             var v = parseFloat(value),
                 p = Math.max(precision,0)||0,
                 t = type||'round';
              return (Math[t](v*Math.pow(10,p))/Math.pow(10,p)).toFixed(p);
          }
    });

console.log(
    Math.precision(3.1,3), // round 3 digits 
    Math.precision(0.12345,2,'ceil'), // ceil 2 digits
    Math.precision(1.1) // integer part
)

bortunac
źródło
0

parseInt(number * 100) / 100; pracował dla mnie.

Be Wake Pandey
źródło
0

oto inne rozwiązanie, aby zaokrąglić tylko przy użyciu podłogi, co oznacza, że ​​obliczona kwota nie będzie większa niż kwota pierwotna (czasami wymagana do transakcji):

Math.floor(num* 100 )/100;
Naty
źródło
0

Możesz wypróbować ten kod:

    function FormatNumber(number, numberOfDigits = 2) {
        try {
            return new Intl.NumberFormat('en-US').format(parseFloat(number).toFixed(2));
        } catch (error) {
            return 0;
        }
    }

    var test1 = FormatNumber('1000000.4444');
    alert(test1); // 1,000,000.44

    var test2 = FormatNumber(100000000000.55555555, 4);
    alert(test2); // 100,000,000,000.56
VnDevil
źródło
0

Wypróbuj poniższy kod:

function numberWithCommas(number) { 

   var newval = parseFloat(Math.round(number * 100) / 100).toFixed(2);

   return newval.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",");
}
Tsuna Sawada
źródło
-3
(num + "").replace(/^([0-9]*)(\.[0-9]{1,2})?.*$/,"$1$2")
Zupa Krukowa
źródło
-3

Oto jak rozwiązuję mój problem:

parseFloat(parseFloat(floatString).toFixed(2));
Alex T.
źródło