Memformat angka untuk selalu menampilkan 2 tempat desimal


783

Saya ingin memformat nomor saya untuk selalu menampilkan 2 tempat desimal, pembulatan jika berlaku.

Contoh:

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

Saya telah menggunakan ini:

parseFloat(num).toFixed(2);

Tapi itu ditampilkan 1sebagai 1, bukan 1.00.


2
Maksud saya, jika saya memasukkan 1, tidak akan menunjukkan angka sebagai 1,00, tetapi jika saya memasukkan 1,345 maka akan menunjukkan 1,35
Varada

1
Saya telah menyusun ulang pertanyaan Anda menjadi apa yang saya yakin Anda cari. Periksa untuk memastikan saya memahami Anda dengan benar.
membanting tulang

pembulatan yang tepat dengan dukungan yaitu. gist.github.com/ArminVieweg/28647e735aa6efaba401
TarranJones


Jawaban:


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

Demo Langsung

Perhatikan bahwa itu akan membulatkan ke 2 tempat desimal, sehingga input 1.346akan kembali 1.35.


6
@ Kooilnc: OP ingin 1ditampilkan sebagai 1.00, dan 1.341ditampilkan sebagai 1.34.
membanting tulang

49
Tidak perlu menggunakan round () karena toFixed () membulatkannya.
Milan Babuškov

27
toFixed () membulatkannya tetapi jangan lupa mengembalikan string ... Jadi metode ini hanya berguna untuk tampilan. Jika Anda ingin melakukan perhitungan matematika lebih lanjut pada nilai bulat, jangan gunakan toFixed ().
TWright

8
menurut MDN, Math.round tidak akan selalu memberikan hasil yang akurat karena kesalahan pembulatan. Saya menguji ini dengan 1,005, yang seharusnya membulatkan ke 1,01, tetapi memberikan 1,00. Gunakan jawaban saya untuk akurasi yang konsisten: stackoverflow.com/a/34796988/3549440 .
Nate

13
Seluruh jawaban ini dapat dikurangi menjadi (+num).toFixed(2). Bahkan mempertahankan bug pembulatan dalam aslinya, lihat jawaban Nate .
RobG

322
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


1
Baris terakhir salah. Saya mencoba ini di konsol Chrome dan `` Number (1,365) .toFixed (2) mengembalikan "1,37"
Andre

1
@Andre, Chrome 29.0.1547.57 memberi saya 1.34ekspresi Number(1.345).toFixed(2).
Drew Noakes

1
toFixed memang melakukan pembulatan, yang dapat Anda lihat di hampir setiap nomor tes.
andy

40
Tidak sengaja mengirimkan komentar terakhir sebelum selesai .. 1.345adalah contoh angka yang tidak dapat disimpan tepat di titik mengambang, jadi saya pikir alasannya tidak bulat seperti yang Anda harapkan, adalah bahwa itu sebenarnya disimpan sebagai angka sedikit kurang dari 1,345 dan dibulatkan ke bawah. Jika Anda menguji dengan dengan (1.34500001).toFixed(2)maka Anda melihatnya dengan benar membulatkan ke1.35
andy

94

Jawaban ini akan gagal jika value = 1.005.

Sebagai solusi yang lebih baik, masalah pembulatan dapat dihindari dengan menggunakan angka yang diwakili dalam notasi eksponensial:

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

Kode bersih seperti yang disarankan oleh @Kon, dan penulis asli:

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

Anda dapat menambahkan toFixed()di akhir untuk mempertahankan titik desimal misalnya: 1.00tetapi perhatikan bahwa itu akan kembali sebagai string.

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

Kredit: Pembulatan Desimal dalam JavaScript


13
Hebatnya, semua orang di sini gagal melihat yang toFixedmemiliki masalah pembulatan itu. Jawaban Anda harus yang diterima.
Armfoot

1
Baru diuji untuk melihat apakah ini masih terjadi. Anda masih benar untuk Versi Chrome 59.0.3071.115 Solusi Anda akan mengumpulkan untuk 1.005 (1.01) dan bulat untuk 1.00499999 (1.00)
Artistan

jsfiddle.net/Artistan/qq895bnp/28 ada "waktu" ketika toFixed akan bekerja, tetapi itu cukup tidak konsisten. :)
Artistan

surround Number in parseFloat adalah string yang kembali
user889030

1
Ini jawaban yang solid. Beberapa perbaikan yang dapat saya pikirkan: (1) VS Code (file TypeScript) tidak suka Math.round () meneruskan sebuah string. (2) Jadikan jumlah tempat desimal menjadi dinamis (tidak dikodekan ke 2). (3) toFixed () tampaknya tidak perlu. Jadi yang saya pikirkan adalahNumber(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

Itu memberikan hasil yang tidak terduga, jika nomor Anda bisa 1,4, dan 23,654, dan 0, presisi apa yang akan Anda ambil?
shinzou

2
Perhatikan bahwa OP meminta "pembulatan jika ada" . toPrecisionhanya memformat angka ke sejumlah tempat desimal tertentu, hanya meninggalkan tempat yang berlebihan, tetapi tidak membulatkannya . Tentu saja ini bisa sangat berguna, tetapi penting untuk memahami perbedaannya.
Boaz - Reinstate Monica

1
Sebenarnya toPrecision tidak bulat, menurut Mozilla. Uji:(20.55).toPrecision(3) "20.6"
James L.

2
Jika Anda ingin menghapus angka nol , masukkan angka atau angka setelah menggunakan toFixed: const formattedVal = Number(val.toFixed(2));Jangan gunakan toPrecision, karena menghitung angka non-desimal saat menggunakan parameter presisi.
James L.

17

Untuk pembulatan paling akurat, buat fungsi ini:

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

dan menggunakannya untuk membulatkan ke 2 tempat desimal:

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

Berkat Razu , artikel ini , dan referensi Math.round MDN .


1
bagaimana dengan 1,0049999999999998934?
4esn0k

1
Itu tidak melampaui 2 dp
Stephen Adelakun

1
jsfiddle.net/Artistan/qq895bnp diuji, ini adalah satu-satunya metode konsisten yang saya lihat. Terima kasih.
Artistan

17

Untuk browser modern, gunakan toLocaleString:

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

Tentukan tag lokal sebagai parameter pertama untuk mengontrol pemisah desimal . Untuk titik, gunakan misalnya lokal Bahasa Inggris AS:

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

pemberian yang mana:

1.35

Sebagian besar negara di Eropa menggunakan koma sebagai pemisah desimal, jadi jika Anda misalnya menggunakan lokal Swedia / Swedia:

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

itu akan memberi:

1,35


Tidak yakin mengapa ini diturunkan, sepertinya bekerja dengan baik untuk saya. Silakan tambahkan komentar jika Anda bermaksud untuk downvote jika ada yang salah dengan ini!
John Culviner

13

Jawaban paling sederhana:

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

Contoh: http://jsfiddle.net/E2XU7/


11
Yah, toFixedsudah disarankan di stackoverflow.com/a/13292833/218196 . Informasi tambahan apa yang diberikan pertanyaan Anda?
Felix Kling

jawaban itu tidak termasuk fungsionalitas putaran, jawaban saya termasuk tho.
macio.Jun

8
Uh? Jawabannya persis sama. Memanggil toFixednomor.
Felix Kling

1
Benar, fungsi yang sama, tetapi hasil dari jawaban itu menyesatkan, saya hanya memperbaikinya dengan menyatakan fungsionalitas putaran.
macio.Jun

Pertanyaannya menyatakan: "... pembulatan jika ada". Jawaban Anda tidak melibatkan pembulatan.
Chris

12

Solusi yang jauh lebih umum untuk pembulatan ke tempat N

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

1
Alswer ini gagal dengan angka-angka tertentu mendekati 0, roundN(-3.4028230607370965e+38,2)mengembalikan "-3.4028230607370965e+38"bukannya yang diharapkan 0,00
Ferrybig

@Ferrybig menarik saya akan menguji angka yang Anda sebutkan dan memikirkan solusinya, terima kasih untuk pengujian
PirateApp

1
Perhatikan bahwa angka yang disebutkan sebelumnya tidak boleh menunjukkan nol, tetapi angka yang besar sebagai gantinya, ini hanya kesalahan di otak saya. Tapi itu masih tidak berhasil, karena masih belum menunjukkan 2 desimal
Ferrybig


9

Jika Anda sudah menggunakan jQuery, Anda bisa melihat menggunakan plugin Format Angka jQuery .

Plugin dapat mengembalikan angka yang diformat sebagai string, Anda dapat mengatur desimal, dan ribuan pemisah, dan Anda dapat memilih jumlah desimal untuk ditampilkan.

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

Anda juga bisa mendapatkan Format Angka jQuery dari GitHub .


11
Adalah berlebihan untuk menggunakan plugin "hanya untuk memiliki bagian desimal panjang tetap".
Lashae

9
@Lashae, tentu, jika hanya itu yang ingin Anda lakukan. Saya memposting ini jika OP atau orang lain menginginkan fungsionalitas tambahan yang disediakan plugin juga.
Sam Sehnert

jika poster pertanyaan telah menambahkan tag jQuery tentu saja;)
fullstacklife

7

Apakah ini yang Anda maksud?

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>


6

Ubah angka menjadi string, dengan hanya menyimpan dua desimal:

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

Hasil dari n adalah:

5.57

4

Apakah Anda mencari lantai?

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

4
Saya tidak berpikir dia ingin membulatkan ke bilangan bulat terdekat.
membanting tulang

ya, saya tidak yakin dari deskripsi, tapi saya hanya membuangnya di luar sana
samwise

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

3

Berikut ini juga fungsi generik yang dapat memformat ke sejumlah tempat desimal:

function numberFormat(val, decimalPlaces) {

    var multiplier = Math.pow(10, decimalPlaces);
    return (Math.round(val * multiplier) / multiplier).toFixed(decimalPlaces);
}

3

Di mana pemformatan khusus diperlukan, Anda harus menulis rutinitas Anda sendiri atau menggunakan fungsi pustaka yang melakukan apa yang Anda butuhkan. Fungsi ECMAScript dasar biasanya tidak cukup untuk menampilkan angka yang diformat.

Penjelasan menyeluruh tentang pembulatan dan pemformatan ada di sini: http://www.merlyn.demon.co.uk/js-round.htm#RiJ

Sebagai aturan umum, pembulatan dan pemformatan seharusnya hanya ditampilkan sebagai langkah terakhir sebelum output. Melakukannya lebih awal dapat menyebabkan kesalahan besar yang tidak terduga dan menghancurkan pemformatan.


Ada saat-saat ketika saya menggelengkan kepala pada pilihan saya sendiri untuk terlibat sangat larut akhir-akhir ini di seluruh platform JS / Ecma ini. :( "Di mana pemformatan khusus diperlukan, Anda harus menulis rutinitas Anda sendiri atau menggunakan fungsi pustaka yang melakukan apa yang Anda butuhkan. Fungsionalitas ECMAScript dasar biasanya tidak cukup untuk menampilkan angka-angka yang diformat." tetapi karena fakta itu ada. Sedih saja. Dapatkan bola, 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>


2

Jalankan saja ke salah satu utas terlama ini, di bawah ini adalah solusi saya:

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

Beritahu saya jika ada yang bisa membuat lubang


2


2
Potongan kode ini cukup untuk memenuhi kebutuhan Anda parseFloat(num.toFixed(2))
kva

1

Anda tidak memberi kami seluruh gambaran.

javascript:alert(parseFloat(1).toFixed(2))menunjukkan 1,00 di browser saya ketika saya tempelkan di bilah lokasi. Namun jika Anda melakukan sesuatu setelahnya, itu akan kembali.

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


shows 1 and not 1.00

Bekerja di FF 50, Chrome 49 dan 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);

1

Saya harus memutuskan antara konversi parseFloat () dan Number () sebelum saya dapat melakukan panggilan toFixed (). Berikut adalah contoh dari pemformatan input pengguna pasca-pengambilan.

HTML:

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

Penangan acara:

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

Kode di atas akan menghasilkan pengecualian TypeError. Perhatikan bahwa meskipun tipe input html adalah "angka", input pengguna sebenarnya adalah tipe data "string". Namun, fungsi toFixed () hanya dapat dipanggil pada objek yang merupakan Angka.

Kode akhir saya akan terlihat sebagai berikut:

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

Alasan saya memilih untuk menggunakan Number () vs. parseFloat () adalah karena saya tidak harus melakukan validasi tambahan baik untuk string input kosong, maupun nilai NaN. Fungsi Number () akan secara otomatis menangani string kosong dan diam-diam menjadi nol.


0

Saya suka:

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

Bulatkan angka dengan 2 angka desimal, lalu pastikan untuk menguraikannya dengan parseFloat() mengembalikan angka , bukan string kecuali Anda tidak peduli apakah itu string atau angka.


Saya kira jika tujuannya adalah untuk menampilkan dengan 2 desimal presisi, mengurai float akan mengacaukannya. MisalnyaparseFloat("1.00") // 1
Stijn de Witt

0

Perpanjang objek Matematika dengan metode presisi

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
)



0

berikut ini adalah solusi lain untuk hanya menggunakan floor, artinya, memastikan jumlah yang dihitung tidak akan lebih besar dari jumlah semula (terkadang diperlukan untuk transaksi):

Math.floor(num* 100 )/100;

0

Anda dapat mencoba kode ini:

    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

0

Coba kode di bawah ini:

function numberWithCommas(number) { 

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

   return newval.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",");
}


-3

Inilah cara saya memecahkan masalah saya:

parseFloat(parseFloat(floatString).toFixed(2));
Dengan menggunakan situs kami, Anda mengakui telah membaca dan memahami Kebijakan Cookie dan Kebijakan Privasi kami.
Licensed under cc by-sa 3.0 with attribution required.