Este es mi formulario:
<input type="text" class="form-control amount" value="" placeholder="amount" /> <input type="hidden" class="price" value="3.30" /> <input type="text" class="form-control total" value="" disabled />Mi js:
$('.amount').on('keyup', function (e) { e.preventDefault(); var amount = $('.amount').val(); var total = Number(amount) * Number($('.price').val()); $('.total').val(total); }); Si completo una cantidad de 3 , el resultado en la entrada con el total de la clase me muestra: 9.899999999999999 en lugar de 19.80 . (3 * 3,30 es exactamente 9,90).
¿Alguien puede explicarme por qué el resultado es tantos caracteres detrás del punto?
Sé que puedo reducir el resultado en 2 decimales con .toFixed(2) pero eso no explica por qué un valor que es exactamente 9.90 cambia a 9.899999999999999
Esto se debe a que los números flotantes se almacenan como dígitos binarios. Para habilitar una amplia gama de números y aún así mantener un tamaño razonable en la memoria para cada número, se sacrifica un poco la precisión de los resultados. Puede leer más sobre aquí https://stackoverflow.com/a/588014/3807365
Esto sucede debido acómo funciona la aritmética de punto flotante . En pocas palabras, el número flotante no se representa internamente tal cual, por lo que cuando el idioma va y viene para mostrarlo, puede haber algunos problemas de precisión (como el que está enfrentando). Vea el vínculo para mas detalles.
En resumen, como parece estar manejando cálculos de moneda, su mejor opción es usar, en lugar de flotar, un tipo de datos específico como moneda.js :
$('.amount').on('keyup', function (e) { e.preventDefault(); var amount = $('.amount').val(); var total = currency(amount).multiply(currency($('.price').val())); $('.total').val(total); }); <script src="https://cdn.jsdelivr.net/npm/currency.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <input type="text" class="form-control amount" value="" placeholder="amount" /> <input type="hidden" class="price" value="3.30" /> <input type="text" class="form-control total" value="" disabled />Hay muchas librerías para eso, otra es dinero.js .