Formatando um número com exatamente duas casas decimais em JavaScript
https://stackoverflow.com/questions/1726630
-
19-09-2019 - |
italiano
english
français
española
中国
日本の
العربية
Deutsch
한국어
Português
RussianPergunta
Eu tenho esta linha de código que arredonda meus números para duas casas decimais.Mas recebo números como este:10,8, 2,4, etc.Esta não é minha ideia de duas casas decimais, então como posso melhorar o seguinte?
Math.round(price*Math.pow(10,2))/Math.pow(10,2);
Quero números como 10,80, 2,40, etc.O uso de jQuery está bom para mim.
Solução
Para formatar um número usando notação de ponto fixo, você pode simplesmente usar o tofixado método:
(10.8).toFixed(2); // "10.80"
var num = 2.4;
alert(num.toFixed(2)); // "2.40"
Observe que toFixed() Retorna uma string.
IMPORTANTE: Observe que o tofixado não arredonde, 90% das vezes, ele retornará o valor arredondado, mas para muitos casos não funciona. Experimente isso em seu console:
2.005.toFixed(2)
Você vai obter a resposta errada
Não existe uma maneira natural de obter um arredondamento decimal em JavaScript, você precisará do seu próprio poli -preenchimento ou usará uma biblioteca. Você pode olhar para o poli -preto de Mozilla para isso https://developer.mozilla.org/en-us/docs/web/javascript/reference/global_objects/math/round
Outras dicas
Este é um tópico antigo, mas ainda assim os resultados do Google de melhor classificação e as soluções oferecidas compartilham o mesmo problema de decimais de ponto flutuante. Aqui está a função (muito genérica) que eu uso, Obrigado ao MDN:
function round(value, exp) {
if (typeof exp === 'undefined' || +exp === 0)
return Math.round(value);
value = +value;
exp = +exp;
if (isNaN(value) || !(typeof exp === 'number' && exp % 1 === 0))
return NaN;
// Shift
value = value.toString().split('e');
value = Math.round(+(value[0] + 'e' + (value[1] ? (+value[1] + exp) : exp)));
// Shift back
value = value.toString().split('e');
return +(value[0] + 'e' + (value[1] ? (+value[1] - exp) : -exp));
}
Como podemos ver, não temos esses problemas:
round(1.275, 2); // Returns 1.28
round(1.27499, 2); // Returns 1.27
Esta generalidade também fornece algumas coisas legais:
round(1234.5678, -2); // Returns 1200
round(1.2345678e+2, 2); // Returns 123.46
round("123.45"); // Returns 123
Agora, para responder à pergunta do OP, é preciso digitar:
round(10.8034, 2).toFixed(2); // Returns "10.80"
round(10.8, 2).toFixed(2); // Returns "10.80"
Ou, para uma função mais concisa e menos genérica:
function round2Fixed(value) {
value = +value;
if (isNaN(value))
return NaN;
// Shift
value = value.toString().split('e');
value = Math.round(+(value[0] + 'e' + (value[1] ? (+value[1] + 2) : 2)));
// Shift back
value = value.toString().split('e');
return (+(value[0] + 'e' + (value[1] ? (+value[1] - 2) : -2))).toFixed(2);
}
Você pode ligar para:
round2Fixed(10.8034); // Returns "10.80"
round2Fixed(10.8); // Returns "10.80"
Vários exemplos e testes (graças a @tj-crowder!):
function round(value, exp) {
if (typeof exp === 'undefined' || +exp === 0)
return Math.round(value);
value = +value;
exp = +exp;
if (isNaN(value) || !(typeof exp === 'number' && exp % 1 === 0))
return NaN;
// Shift
value = value.toString().split('e');
value = Math.round(+(value[0] + 'e' + (value[1] ? (+value[1] + exp) : exp)));
// Shift back
value = value.toString().split('e');
return +(value[0] + 'e' + (value[1] ? (+value[1] - exp) : -exp));
}
function naive(value, exp) {
if (!exp) {
return Math.round(value);
}
var pow = Math.pow(10, exp);
return Math.round(value * pow) / pow;
}
function test(val, places) {
subtest(val, places);
val = typeof val === "string" ? "-" + val : -val;
subtest(val, places);
}
function subtest(val, places) {
var placesOrZero = places || 0;
var naiveResult = naive(val, places);
var roundResult = round(val, places);
if (placesOrZero >= 0) {
naiveResult = naiveResult.toFixed(placesOrZero);
roundResult = roundResult.toFixed(placesOrZero);
} else {
naiveResult = naiveResult.toString();
roundResult = roundResult.toString();
}
$("<tr>")
.append($("<td>").text(JSON.stringify(val)))
.append($("<td>").text(placesOrZero))
.append($("<td>").text(naiveResult))
.append($("<td>").text(roundResult))
.appendTo("#results");
}
test(0.565, 2);
test(0.575, 2);
test(0.585, 2);
test(1.275, 2);
test(1.27499, 2);
test(1234.5678, -2);
test(1.2345678e+2, 2);
test("123.45");
test(10.8034, 2);
test(10.8, 2);
test(1.005, 2);
test(1.0005, 2);table {
border-collapse: collapse;
}
table, td, th {
border: 1px solid #ddd;
}
td, th {
padding: 4px;
}
th {
font-weight: normal;
font-family: sans-serif;
}
td {
font-family: monospace;
}<table>
<thead>
<tr>
<th>Input</th>
<th>Places</th>
<th>Naive</th>
<th>Thorough</th>
</tr>
</thead>
<tbody id="results">
</tbody>
</table>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>Normalmente, adiciono isso à minha biblioteca pessoal, e depois de algumas sugestões e usando a solução @timineutron também, e tornando -a adaptável para a duração decimal, este se encaixa melhor:
function precise_round(num, decimals) {
var t = Math.pow(10, decimals);
return (Math.round((num * t) + (decimals>0?1:0)*(Math.sign(num) * (10 / Math.pow(100, decimals)))) / t).toFixed(decimals);
}
funcionará para as exceções relatadas.
Não sei por que não posso adicionar um comentário a uma resposta anterior (talvez eu esteja irremediavelmente cego, não sei), mas tive uma solução usando a resposta de @miguel:
function precise_round(num,decimals) {
return Math.round(num*Math.pow(10, decimals)) / Math.pow(10, decimals);
}
E seus dois comentários (de @bighostkim e @imre):
- Problema com
precise_round(1.275,2)não retornando 1,28 - Problema com
precise_round(6,2)não retornando 6,00 (como ele queria).
Minha solução final é a seguinte:
function precise_round(num,decimals) {
var sign = num >= 0 ? 1 : -1;
return (Math.round((num*Math.pow(10,decimals)) + (sign*0.001)) / Math.pow(10,decimals)).toFixed(decimals);
}
Como você pode ver, eu tinha que adicionar um pouco de "correção" (não é o que é, mas como o Math.Round é uma perda - você pode verificar no jsfiddle.net - esta é a única maneira que eu sabia como "consertar " isto). Ele adiciona 0,001 ao número já acolchoado, por isso está adicionando um 1 três 0s à direita do valor decimal. Portanto, deve ser seguro de usar.
Depois disso, adicionei .toFixed(decimal) para sempre emitir o número no formato correto (com a quantidade certa de decimais).
Então é isso. Use bem ;)
Editar: Adicionada funcionalidade à "correção" de números negativos.
Uma maneira de ter 100% de certeza de que você recebe um número com 2 decimais:
(Math.round(num*100)/100).toFixed(2)
Se isso causar erros de arredondamento, você pode usar o seguinte, como James explicou em seu comentário:
(Math.round((num * 1000)/10)/100).toFixed(2)
tofixado (n) fornece n comprimento após o ponto decimal; toprecision (x) fornece x comprimento total.
Use este método abaixo
// Example: toPrecision(4) when the number has 7 digits (3 before, 4 after)
// It will round to the tenths place
num = 500.2349;
result = num.toPrecision(4); // result will equal 500.2
E se você deseja que o número seja fixo
result = num.toFixed(2);
Não encontrei uma solução precisa para esse problema, então criei o meu próprio:
function inprecise_round(value, decPlaces) {
return Math.round(value*Math.pow(10,decPlaces))/Math.pow(10,decPlaces);
}
function precise_round(value, decPlaces){
var val = value * Math.pow(10, decPlaces);
var fraction = (Math.round((val-parseInt(val))*10)/10);
//this line is for consistency with .NET Decimal.Round behavior
// -342.055 => -342.06
if(fraction == -0.5) fraction = -0.6;
val = Math.round(parseInt(val) + fraction) / Math.pow(10, decPlaces);
return val;
}
Exemplos:
function inprecise_round(value, decPlaces) {
return Math.round(value * Math.pow(10, decPlaces)) / Math.pow(10, decPlaces);
}
function precise_round(value, decPlaces) {
var val = value * Math.pow(10, decPlaces);
var fraction = (Math.round((val - parseInt(val)) * 10) / 10);
//this line is for consistency with .NET Decimal.Round behavior
// -342.055 => -342.06
if (fraction == -0.5) fraction = -0.6;
val = Math.round(parseInt(val) + fraction) / Math.pow(10, decPlaces);
return val;
}
// This may produce different results depending on the browser environment
console.log("342.055.toFixed(2) :", 342.055.toFixed(2)); // 342.06 on Chrome & IE10
console.log("inprecise_round(342.055, 2):", inprecise_round(342.055, 2)); // 342.05
console.log("precise_round(342.055, 2) :", precise_round(342.055, 2)); // 342.06
console.log("precise_round(-342.055, 2) :", precise_round(-342.055, 2)); // -342.06
console.log("inprecise_round(0.565, 2) :", inprecise_round(0.565, 2)); // 0.56
console.log("precise_round(0.565, 2) :", precise_round(0.565, 2)); // 0.57@heridev e eu criamos uma pequena função em jQuery.
Você pode tentar a seguir:
HTML
<input type="text" name="one" class="two-digits"><br>
<input type="text" name="two" class="two-digits">
jQuery
// apply the two-digits behaviour to elements with 'two-digits' as their class
$( function() {
$('.two-digits').keyup(function(){
if($(this).val().indexOf('.')!=-1){
if($(this).val().split(".")[1].length > 2){
if( isNaN( parseFloat( this.value ) ) ) return;
this.value = parseFloat(this.value).toFixed(2);
}
}
return this; //for chaining
});
});
Demo online:
Aqui está um simples
function roundFloat(num,dec){
var d = 1;
for (var i=0; i<dec; i++){
d += "0";
}
return Math.round(num * d) / d;
}
Use como alert(roundFloat(1.79209243929,4));
O problema com os valores de ponto flutuante é que eles estão tentando representar uma quantidade infinita de valores (contínuos) com uma quantidade fixa de bits. Então, naturalmente, deve haver alguma perda no jogo e você será mordido com alguns valores.
Quando um computador armazena 1.275 como um valor de ponto flutuante, ele não se lembrará se era de 1.275 ou 1.2749999999999999993, ou mesmo 1.27500000000000002. Esses valores devem dar resultados diferentes após arredondar para dois decimais, mas não, pois para o computador eles olham exatamente o mesmo Depois de armazenar como valores de ponto flutuante, e não há como restaurar os dados perdidos. Quaisquer outros cálculos acumularão apenas essa imprecisão.
Portanto, se a precisão for importante, você deve evitar valores de ponto flutuante desde o início. As opções mais simples são para
- use um Biblioteca dedicada
- Use strings para armazenar e passar os valores (acompanhados por operações de string)
- Use números inteiros (por exemplo, você pode passar a quantidade de centésimos do seu valor real, por exemplo, valor em centavos em vez de quantidade em dólares)
Por exemplo, ao usar os números inteiros para armazenar o número de centésimos, a função para encontrar o valor real é bastante simples:
function descale(num, decimals) {
var hasMinus = num < 0;
var numString = Math.abs(num).toString();
var precedingZeroes = '';
for (var i = numString.length; i <= decimals; i++) {
precedingZeroes += '0';
}
numString = precedingZeroes + numString;
return (hasMinus ? '-' : '')
+ numString.substr(0, numString.length-decimals)
+ '.'
+ numString.substr(numString.length-decimals);
}
alert(descale(127, 2));
Com strings, você precisará de arredondamento, mas ainda é gerenciável:
function precise_round(num, decimals) {
var parts = num.split('.');
var hasMinus = parts.length > 0 && parts[0].length > 0 && parts[0].charAt(0) == '-';
var integralPart = parts.length == 0 ? '0' : (hasMinus ? parts[0].substr(1) : parts[0]);
var decimalPart = parts.length > 1 ? parts[1] : '';
if (decimalPart.length > decimals) {
var roundOffNumber = decimalPart.charAt(decimals);
decimalPart = decimalPart.substr(0, decimals);
if ('56789'.indexOf(roundOffNumber) > -1) {
var numbers = integralPart + decimalPart;
var i = numbers.length;
var trailingZeroes = '';
var justOneAndTrailingZeroes = true;
do {
i--;
var roundedNumber = '1234567890'.charAt(parseInt(numbers.charAt(i)));
if (roundedNumber === '0') {
trailingZeroes += '0';
} else {
numbers = numbers.substr(0, i) + roundedNumber + trailingZeroes;
justOneAndTrailingZeroes = false;
break;
}
} while (i > 0);
if (justOneAndTrailingZeroes) {
numbers = '1' + trailingZeroes;
}
integralPart = numbers.substr(0, numbers.length - decimals);
decimalPart = numbers.substr(numbers.length - decimals);
}
} else {
for (var i = decimalPart.length; i < decimals; i++) {
decimalPart += '0';
}
}
return (hasMinus ? '-' : '') + integralPart + (decimals > 0 ? '.' + decimalPart : '');
}
alert(precise_round('1.275', 2));
alert(precise_round('1.27499999999999993', 2));
Observe que esta função volta para mais próxima, Afastar -se de zero, enquanto IEEE 754 recomenda arredondamento para mais próximo, laços até mesmo como o comportamento padrão para operações de ponto flutuante. Tais modificações são deixadas como um exercício para o leitor :)
Arredonde seu valor decimal e depois use toFixed(x) Para seus dígitos esperados.
function parseDecimalRoundAndFixed(num,dec){
var d = Math.pow(10,dec);
return (Math.round(num * d) / d).toFixed(dec);
}
Ligar
parsedecimalound efixed (10.800243929,4) => 10,80 parsedecimalround efixed (10.807243929,2) => 10,81
/**
* MidpointRounding away from zero ('arithmetic' rounding)
* Uses a half-epsilon for correction. (This offsets IEEE-754
* half-to-even rounding that was applied at the edge cases).
*/
function RoundCorrect(num, precision = 2) {
// half epsilon to correct edge cases.
var c = 0.5 * Number.EPSILON * num;
// var p = Math.pow(10, precision); //slow
var p = 1; while (precision--> 0) p *= 10;
if (num < 0)
p *= -1;
return Math.round((num + c) * p) / p;
}
// testing some +ve edge cases
console.log(RoundCorrect(1.005, 2)); // 1.01 correct
console.log(RoundCorrect(2.175, 2)); // 2.18 correct
console.log(RoundCorrect(5.015, 2)); // 5.02 correct
// testing some -ve edge cases
console.log(RoundCorrect(-1.005, 2)); // -1.01 correct
console.log(RoundCorrect(-2.175, 2)); // -2.18 correct
console.log(RoundCorrect(-5.015, 2)); // -5.02 correctAqui está minha solução de 1 linha: Number((yourNumericValueHere).toFixed(2));
Aqui está o que acontece:
1) Primeiro, você se aplica .toFixed(2) Sobre o número que você deseja completar os lugares decimais. Observe que isso converterá o valor em uma string de número. Portanto, se você estiver usando o TypeScript, ele lançará um erro como este:
"Tipo 'string' não é atribuível ao número de digitar '" "
2) Para recuperar o valor numérico ou converter a string em valor numérico, basta aplicar o Number() função no chamado valor 'string'.
Para esclarecimentos, consulte o exemplo abaixo:
EXEMPLO:Eu tenho uma quantidade que tem até 5 dígitos nos lugares decimais e gostaria de encurtar -o para até 2 lugares decimais. Eu faço assim:
var price = 0.26453;
var priceRounded = Number((price).toFixed(2));
console.log('Original Price: ' + price);
console.log('Price Rounded: ' + priceRounded);Colocar a seguir Em algum escopo global:
Number.prototype.getDecimals = function ( decDigCount ) {
return this.toFixed(decDigCount);
}
e Então tente:
var a = 56.23232323;
a.getDecimals(2); // will return 56.23
Atualizar
Observe que toFixed() só pode funcionar para o número de decimais entre 0-20 ou seja a.getDecimals(25) Pode gerar um erro de JavaScript, para acomodar que você pode adicionar algumas verificações adicionais, ou seja,
Number.prototype.getDecimals = function ( decDigCount ) {
return ( decDigCount > 20 ) ? this : this.toFixed(decDigCount);
}
Number(((Math.random() * 100) + 1).toFixed(2))
Isso retornará um número aleatório de 1 a 100 arredondado para 2 casas decimais.
Number(Math.round(1.005+'e2')+'e-2'); // 1.01
Isso funcionou para mim: Decimais de arredondamento em JavaScript
Usando esta resposta por referência: https://stackoverflow.com/a/21029698/454827
Eu construo uma função para obter um número dinâmico de decimais:
function toDec(num, dec)
{
if(typeof dec=='undefined' || dec<0)
dec = 2;
var tmp = dec + 1;
for(var i=1; i<=tmp; i++)
num = num * 10;
num = num / 10;
num = Math.round(num);
for(var i=1; i<=dec; i++)
num = num / 10;
num = num.toFixed(dec);
return num;
}
Aqui, exemplo de trabalho: https://jsfiddle.net/wpxldulc/
parse = function (data) {
data = Math.round(data*Math.pow(10,2))/Math.pow(10,2);
if (data != null) {
var lastone = data.toString().split('').pop();
if (lastone != '.') {
data = parseFloat(data);
}
}
return data;
};
$('#result').html(parse(200)); // output 200
$('#result1').html(parse(200.1)); // output 200.1
$('#result2').html(parse(200.10)); // output 200.1
$('#result3').html(parse(200.109)); // output 200.11<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<div id="result"></div>
<div id="result1"></div>
<div id="result2"></div>
<div id="result3"></div>Arredondar para baixo
function round_down(value, decPlaces) {
return Math.floor(value * Math.pow(10, decPlaces)) / Math.pow(10, decPlaces);
}
Arredondar para cima
function round_up(value, decPlaces) {
return Math.ceil(value * Math.pow(10, decPlaces)) / Math.pow(10, decPlaces);
}
Redondo mais próximo
function round_nearest(value, decPlaces) {
return Math.round(value * Math.pow(10, decPlaces)) / Math.pow(10, decPlaces);
}
Mesclado https://stackoverflow.com/a/7641824/1889449 e https://www.kirupa.com/html5/rounding_numbers_in_javascript.htm Obrigado.
Com esses exemplos, você ainda receberá um erro ao tentar arredondar o número 1.005, a solução é usar uma biblioteca como Math.js ou esta função:
function round(value: number, decimals: number) {
return Number(Math.round(value + 'e' + decimals) + 'e-' + decimals);
}
Recebi algumas idéias deste post alguns meses atrás, mas nenhuma das respostas aqui, nem as respostas de outros posts/blogs poderiam lidar com todos os cenários (por exemplo, números negativos e alguns "números da sorte" que nosso testador encontrou). No final, nosso testador não encontrou nenhum problema com este método abaixo. Colar um trecho do meu código:
fixPrecision: function (value) {
var me = this,
nan = isNaN(value),
precision = me.decimalPrecision;
if (nan || !value) {
return nan ? '' : value;
} else if (!me.allowDecimals || precision <= 0) {
precision = 0;
}
//[1]
//return parseFloat(Ext.Number.toFixed(parseFloat(value), precision));
precision = precision || 0;
var negMultiplier = value < 0 ? -1 : 1;
//[2]
var numWithExp = parseFloat(value + "e" + precision);
var roundedNum = parseFloat(Math.round(Math.abs(numWithExp)) + 'e-' + precision) * negMultiplier;
return parseFloat(roundedNum.toFixed(precision));
},
Eu também tenho comentários de código (desculpe, já esqueci todos os detalhes) ... Estou postando minha resposta aqui para referência futura:
9.995 * 100 = 999.4999999999999
Whereas 9.995e2 = 999.5
This discrepancy causes Math.round(9.995 * 100) = 999 instead of 1000.
Use e notation instead of multiplying /dividing by Math.Pow(10,precision).
Estou corrigindo o problema do modificador.Apoie 2 apenas decimal.
$(function(){
//input number only.
convertNumberFloatZero(22); // output : 22.00
convertNumberFloatZero(22.5); // output : 22.50
convertNumberFloatZero(22.55); // output : 22.55
convertNumberFloatZero(22.556); // output : 22.56
convertNumberFloatZero(22.555); // output : 22.55
convertNumberFloatZero(22.5541); // output : 22.54
convertNumberFloatZero(22222.5541); // output : 22,222.54
function convertNumberFloatZero(number){
if(!$.isNumeric(number)){
return 'NaN';
}
var numberFloat = number.toFixed(3);
var splitNumber = numberFloat.split(".");
var cNumberFloat = number.toFixed(2);
var cNsplitNumber = cNumberFloat.split(".");
var lastChar = splitNumber[1].substr(splitNumber[1].length - 1);
if(lastChar > 0 && lastChar < 5){
cNsplitNumber[1]--;
}
return Number(splitNumber[0]).toLocaleString('en').concat('.').concat(cNsplitNumber[1]);
};
});<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>(Math.round((10.2)*100)/100).toFixed(2)
Isso deve ceder: 10.20
(Math.round((.05)*100)/100).toFixed(2)
Isso deve ceder: 0.05
(Math.round((4.04)*100)/100).toFixed(2)
Isso deve ceder: 4.04
etc.
/*Due to all told stuff. You may do 2 things for different purposes:
When showing/printing stuff use this in your alert/innerHtml= contents:
YourRebelNumber.toFixed(2)*/
var aNumber=9242.16;
var YourRebelNumber=aNumber-9000;
alert(YourRebelNumber);
alert(YourRebelNumber.toFixed(2));
/*and when comparing use:
Number(YourRebelNumber.toFixed(2))*/
if(YourRebelNumber==242.16)alert("Not Rounded");
if(Number(YourRebelNumber.toFixed(2))==242.16)alert("Rounded");
/*Number will behave as you want in that moment. After that, it'll return to its defiance.
*/Isso é muito simples e funciona tão bem quanto qualquer um dos outros:
function parseNumber(val, decimalPlaces) {
if (decimalPlaces == null) decimalPlaces = 0
var ret = Number(val).toFixed(decimalPlaces)
return Number(ret)
}
Como o tofixed () só pode ser chamado em números e, infelizmente, retorna uma string, isso faz toda a análise para você em ambas as direções. Você pode passar uma corda ou um número e recebe um número de volta sempre! Chamular Parsenumber (1,49) fornecerá 1 e o Parsenumber (1,49,2) fornecerá 1,50. Assim como o melhor deles!
Você também pode usar o .toPrecision() Método e algum código personalizado, e sempre arredondam o enésimo dígito decimal, independentemente da duração da parte int.
function glbfrmt (number, decimals, seperator) {
return typeof number !== 'number' ? number : number.toPrecision( number.toString().split(seperator)[0].length + decimals);
}
Você também pode torná -lo um plug -in para um uso melhor.
Simples assim.
var rounded_value=Math.round(value * 100) / 100;
Encontrei uma maneira muito simples de resolver esse problema para mim e pode ser usado ou adaptado:
td[row].innerHTML = price.toPrecision(price.toFixed(decimals).length
100% funcionando !!! Tente
<html>
<head>
<script>
function replacePonto(){
var input = document.getElementById('qtd');
var ponto = input.value.split('.').length;
var slash = input.value.split('-').length;
if (ponto > 2)
input.value=input.value.substr(0,(input.value.length)-1);
if(slash > 2)
input.value=input.value.substr(0,(input.value.length)-1);
input.value=input.value.replace(/[^0-9.-]/,'');
if (ponto ==2)
input.value=input.value.substr(0,(input.value.indexOf('.')+3));
if(input.value == '.')
input.value = "";
}
</script>
</head>
<body>
<input type="text" id="qtd" maxlength="10" style="width:140px" onkeyup="return replacePonto()">
</body>
</html>