JavaScript menampilkan float ke 2 tempat desimal


316

Saya ingin menampilkan angka ke 2 tempat desimal.

Saya pikir saya bisa menggunakan toPrecision(2)JavaScript.

Namun, jika angkanya 0.05, saya dapatkan 0.0500. Saya lebih suka tetap sama.

Lihat di JSbin .

Apa cara terbaik untuk melakukan ini?

Saya bisa memikirkan pengkodean beberapa solusi, tetapi saya membayangkan (saya harap) sesuatu seperti ini ada di dalamnya?

Jawaban:


560
float_num.toFixed(2);

Catatan:toFixed() akan bulat atau pad dengan nol jika perlu untuk memenuhi panjang yang ditentukan.


61
Tetapi mengembalikan string, bukan float!
— Anwar

38
Penulis pertanyaan ingin "menampilkan" itu, sehingga sebuah string sempurna
— Christophe Marois

7
Dan Anda selalu dapat menggunakan parseFloat (float_num.toFixed (2)) untuk mengubah string kembali menjadi float dengan hanya menyimpan dua desimal.
— Hankrecords

3
@war, Anda tidak bisa andal mengitari float (bisa dibilang Anda bisa mengitari float sama sekali) - Anda akan mendapatkan sesuatu seperti 0,0500 atau bahkan 0,0500000000001. Lihat floating-point-gui.de
— jmc

2
@ Terima kasih apa yang Anda katakan tidak benar. Jika saya memiliki '43, 01 'dan saya parseFloat maka saya mendapatkan 43,01 TETAPI jika saya memiliki '43, 10' saya akan mendapatkan 43.1: D bukan yang saya inginkan.
— Lucian Tarna

50

Anda bisa melakukannya dengan toFixedfungsinya, tetapi bermasalah di IE . Jika Anda menginginkan solusi yang andal, lihat jawaban saya di sini .


26
Teknologi harus dikembangkan daripada beradaptasi dengan IE ... (btw. Dalam node js float_num.toFixed(2);berfungsi dengan baik)
— fider


14

Tidak tahu bagaimana saya sampai ke pertanyaan ini, tetapi bahkan jika sudah bertahun-tahun sejak pertanyaan ini diajukan, saya ingin menambahkan metode cepat dan sederhana yang saya ikuti dan tidak pernah mengecewakan saya:

var num = response_from_a_function_or_something();

var fixedNum = parseFloat(num).toFixed( 2 );

1
Kenapa parseFloat()disana? Seharusnya hanya digunakan jika nomor tersebut berasal dari string.
— alex

3
Dalam beberapa kesempatan ketika saya mendapatkan beberapa nilai atribut "data-" dengan jquery dari suatu elemen, jika saya hanya menggunakan toFixed itu menghasilkan kesalahan. parseFloat memperbaikinya.
— Panos

2
Ya itulah yang saya maksud di atas jika itu berasal dari string . Tetapi menggunakannya selalu merupakan saran yang buruk.
— alex


8

number.parseFloat(2) berfungsi tetapi mengembalikan string.

Jika Anda ingin mempertahankannya sebagai tipe angka, Anda dapat menggunakan:

Math.round(number * 100) / 100


4

Anda dapat mencoba mencampur Number()dantoFixed() .

Minta nomor target Anda dikonversi ke string yang bagus dengan digit X lalu konversi string yang telah diformat menjadi angka.

Number( (myVar).toFixed(2) )


Lihat contoh di bawah ini:

var myNumber = 5.01;
var multiplier = 5;
$('#actionButton').on('click', function() {
  $('#message').text( myNumber * multiplier );
});

$('#actionButton2').on('click', function() {
  $('#message').text( Number( (myNumber * multiplier).toFixed(2) ) );
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<button id="actionButton">Weird numbers</button>
<button id="actionButton2">Nice numbers</button>

<div id="message"></div>


Terima kasih atas referensi yang bagus untuk Anda.
— Arman H

1

The toFixed()Metode format nomor menggunakan notasi fixed-point.

dan inilah sintaksnya

numObj.toFixed([digits])

argumen digit adalah opsional dan secara default adalah 0. Dan tipe kembalinya adalah string bukan angka. Tetapi Anda dapat mengonversinya menjadi angka menggunakan

numObj.toFixed([digits]) * 1

Itu juga bisa melempar pengecualian seperti TypeError,RangeError

Berikut ini detail lengkap dan kompatibilitas di browser.


1
let a = 0.0500
a.toFixed(2);

//output
0.05

-1

Saya telah membuat fungsi ini. Ini berfungsi dengan baik tetapi mengembalikan string.

function show_float_val(val,upto = 2){
  var val = parseFloat(val);
  return val.toFixed(upto);
}
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.