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

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

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

Demo na żywo

var num1 = "1";
document.getElementById('num1').innerHTML = (Math.round(num1 * 100) / 100).toFixed(2);

var num2 = "1.341";
document.getElementById('num2').innerHTML = (Math.round(num2 * 100) / 100).toFixed(2);

var num3 = "1.345";
document.getElementById('num3').innerHTML = (Math.round(num3 * 100) / 100).toFixed(2);

span {
    border: 1px solid #000;
    margin: 5px;
    padding: 5px;
}

<span id="num1"></span>
<span id="num2"></span>
<span id="num3"></span>

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

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

document.getElementById('line1').innerHTML = Number(1).toFixed(2);
document.getElementById('line2').innerHTML = Number(1.341).toFixed(2);
document.getElementById('line3').innerHTML = Number(1.345).toFixed(2);
document.getElementById('line4').innerHTML = Number(1.3450001).toFixed(2);

<span id="line1"></span>
<br/>
<span id="line2"></span>
<br/>
<span id="line3"></span>
<br/>
<span id="line4"></span>

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

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

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 .

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

Najprostsza odpowiedź:

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

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

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

var number = 123456.789;


console.log(new Intl.NumberFormat('en-IN', { maximumFractionDigits: 2 }).format(number));

https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Global_Objects/NumberFormat

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 .

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>

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

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

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

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);
}

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.

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ę

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

var quantity = 12;

var import1 = 12.55;

var total = quantity * import1;

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

document.write(answer);

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.

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.

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
)

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

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;

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

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, ",");
}

(num + "").replace(/^([0-9]*)(\.[0-9]{1,2})?.*$/,"$1$2")

Oto jak rozwiązuję mój problem:

parseFloat(parseFloat(floatString).toFixed(2));