Formate o número para sempre mostrar 2 casas decimais


783

Gostaria de formatar meus números para exibir sempre duas casas decimais, arredondando, quando aplicável.

Exemplos:

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

Eu tenho usado isso:

parseFloat(num).toFixed(2);

Mas está exibindo 1como 1, e não 1.00.


2
Quero dizer, se eu entro 1 não irá mostrar o número como 1.00, mas se eu entrar 1.345, em seguida, ele irá mostrar 1,35
— Varada

1
Reformulei sua pergunta para o que acredito que você estava procurando. Verifique se o entendi corretamente.
— drudge

arredondamento preciso com suporte. gist.github.com/ArminVieweg/28647e735aa6efaba401
— TarranJones


Respostas:


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

Demonstração ao vivo

Observe que ele arredondará para 2 casas decimais; portanto, a entrada 1.346retornará 1.35.


6
@Kooilnc: OP quer 1exibir como 1.00e 1.341como 1.34.
— drudge

49
Não há necessidade de usar round (), pois toFixed () o arredonda.
— Milan Babuškov

27
toFixed () o arredonda, mas não esqueça que está retornando uma string ... Portanto, esse método é realmente útil apenas para exibição. Se você deseja executar cálculos matemáticos adicionais no valor arredondado, não use toFixed ().
— TWright 15/10/2015

8
de acordo com o MDN, o Math.round nem sempre fornecerá resultados precisos devido a erros de arredondamento. Eu testei isso com 1.005, que deve arredondar para 1,01, mas dá 1,00. Use minha resposta para obter precisão consistente: stackoverflow.com/a/34796988/3549440 .
— Nate

13
Esta resposta inteira pode ser reduzida para (+num).toFixed(2). Ele ainda mantém o erro de arredondamento no original, veja a resposta de 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
A última linha é falsa. Eu tentei isso no console do Chrome e `` Number (1.365) .toFixed (2) retorna "1.37"
— Andre

1
@ André, o Chrome 29.0.1547.57 me dá uma 1.34expressão Number(1.345).toFixed(2).
— de Drew Noakes

1
O toFixed faz arredondamentos, que você pode ver em quase todos os números de teste.
— andy

40
Acidentalmente enviado esse último comentário antes de terminar .. 1.345é um exemplo de um número que não pode ser armazenado exatamente em ponto flutuante, então eu acho que a razão que ele não volta como você espera, é que ele é realmente armazenado como um número ligeiramente menos de 1.345 e é arredondado para baixo. Se você testar vez com (1.34500001).toFixed(2)então você vê-lo corretamente arredonda para1.35
— andy

94

Esta resposta falhará se value = 1.005.

Como uma solução melhor, o problema de arredondamento pode ser evitado usando números representados na notação exponencial:

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

Código mais limpo, conforme sugerido por @Kon, e o autor original:

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

Você pode adicionar toFixed()no final para reter o ponto decimal, por exemplo: 1.00mas observe que ele retornará como string.

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

Crédito: Arredondar decimais em JavaScript


13
Surpreendentemente, todo mundo aqui não conseguiu ver que toFixedtem esse problema de arredondamento. Sua resposta deve ser a aceita.
— Armfoot

1
Apenas testei para ver se esse ainda era o caso. você ainda está correta para o Chrome versão 59.0.3071.115 sua solução irá arredondar para 1.005 (1.01) e para baixo e volta para 1,00499999 (1,00)
— Artistan

jsfiddle.net/Artistan/qq895bnp/28 há "momentos" em que o toFixed funcionará, mas é bastante inconsistente. :)
— Artistan

surround de Número no parseFloat é sua retornar string
— user889030

1
Esta é uma resposta sólida. Algumas melhorias que posso pensar: (1) O código VS (arquivo TypeScript) não gosta da passagem de Math.round () em uma string. (2) Torne dinâmico o número de casas decimais (não codificado para 2). (3) toFixed () parece desnecessário. Então, o que eu vim com éNumber(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

Isso fornece resultados inesperados, se seu número puder ser 1,4, 23,654 e 0, que precisão você tomaria?
— Shinzou 15/10/16

2
Observe que o OP está solicitando "arredondamento, quando aplicável" . toPrecisionapenas formata o número para um número específico de casas decimais, simplesmente excluindo as casas redundantes, mas não as arredondando . Isso também pode ser muito útil, é claro, mas é importante entender a diferença.
— Boaz - Restabelece Monica

1
Na verdade, o Precision faz a ronda, de acordo com a Mozilla. Teste:(20.55).toPrecision(3) "20.6"
— James L.

2
Se você deseja eliminar os zeros à direita , converta-os para um Número ou Flutuação após o uso toFixed: const formattedVal = Number(val.toFixed(2));Não use toPrecision, pois ele conta os números não-decimais ao usar o parâmetro de precisão.
— James L.

17

Para o arredondamento mais preciso, crie esta função:

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

e use-o para arredondar para duas casas decimais:

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

Graças a Razu , este artigo, e a referência Math.round do MDN .


1
e quanto a 1.0049999999999998934?
— 4sn0k 02/10

1
Não vai além de 2 dp
— Stephen Adelakun 4/16/16

1
jsfiddle.net/Artistan/qq895bnp testado, este é o único método consistente que eu já vi. Obrigado.
— Artistan 19/07

17

Para navegadores modernos, use toLocaleString:

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

Especifique uma tag de localidade como primeiro parâmetro para controlar o separador decimal . Para um ponto, use, por exemplo, localidade em inglês dos EUA:

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

que dá:

1,35

A maioria dos países da Europa usa vírgula como separador decimal; portanto, se você usa, por exemplo, o código de idioma sueco / sueco:

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

vai dar:

1,35


Não sei por que isso foi prejudicado, pareceu funcionar bem para mim. Por favor, adicione um comentário se você pretende reduzir o voto se algo estiver errado com isso!
— John Culviner

13

Resposta mais simples:

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

Exemplo: http://jsfiddle.net/E2XU7/


11
Bem, toFixedjá foi sugerido em stackoverflow.com/a/13292833/218196 . Que informações adicionais sua pergunta fornece?
— Felix Kling #

essa resposta não inclui a funcionalidade redonda, minha resposta inclui tho.
— precisa saber é o seguinte

8
Uh? É exatamente a mesma resposta. Ligando toFixedpara um número.
— Felix Kling #

1
Correta, mesma função, mas o resultado dessa resposta é enganoso, apenas a retifiquei, expressando a funcionalidade redonda.
— precisa saber é o seguinte

A pergunta afirma: "... arredondamento, quando aplicável". Sua resposta não envolve arredondamentos.
— Chris

12

Uma solução muito mais genérica para arredondar para N locais

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
Essa resposta falha com certos números próximos a 0, roundN(-3.4028230607370965e+38,2)retorna em "-3.4028230607370965e+38"vez do esperado 0,00
— Ferrybig 17/04/19

interessante @Ferrybig i vai testar os números que você mencionou e pensar em uma solução, graças para o teste
— PirateApp

1
Observe que o número mencionado anteriormente não deve mostrar zero, mas um número enorme, esse foi apenas um erro no meu cérebro. Mas ainda não funciona, pois ainda não mostra 2 casas decimais
— Ferrybig 17/04/19


9

Se você já usa o jQuery, pode usar o plug-in jQuery Number Format .

O plug-in pode retornar números formatados como uma seqüência de caracteres, você pode definir separadores decimais e milhares e pode escolher o número de decimais a serem exibidos.

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

Você também pode obter o formato de número jQuery no GitHub .


11
É um exagero usar um plugin "apenas para ter uma parte decimal de comprimento fixo".
— Lashae

9
@Lashae, claro, se é tudo o que você quer fazer. Postei isso caso o OP ou qualquer outra pessoa desejasse a funcionalidade extra que o plug-in também oferece.
— Sam Sehnert

se o cartaz da questão tinha adicionado a tag jQuery é claro;)
— fullstacklife

7

É isto que você quer dizer?

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

Converta um número em uma string, mantendo apenas duas casas decimais:

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

O resultado de n será:

5.57

4

Você está procurando andar?

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
Eu não acho que ele queira arredondar para o número inteiro mais próximo.
— drudge

sim, eu não tinha certeza a partir da descrição, mas eu estava apenas jogando-o para fora lá meter
— 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

Aqui também está uma função genérica que pode formatar para qualquer número de casas decimais:

function numberFormat(val, decimalPlaces) {

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

3

Onde formatação específica é necessária, você deve escrever sua própria rotina ou usar uma função de biblioteca que faça o que você precisa. A funcionalidade básica do ECMAScript geralmente é insuficiente para exibir números formatados.

Uma explicação completa sobre arredondamento e formatação está aqui: http://www.merlyn.demon.co.uk/js-round.htm#RiJ

Como regra geral, o arredondamento e a formatação devem ser executados apenas como uma última etapa antes da saída. Fazer isso antes pode introduzir erros inesperadamente grandes e destruir a formatação.


Há momentos em que eu balanço minha cabeça por minha própria escolha para me envolver tão profundamente ultimamente em toda essa plataforma da JS / Ecma. :( "Onde a formatação específica é necessária, você deve escrever sua própria rotina ou usar uma função de biblioteca que faça o que você precisa. A funcionalidade básica do ECMAScript geralmente é insuficiente para a exibição de números formatados." Que declaração asinina - mas porque esse fato existe apenas triste Obter na 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

Basta correr para este de fio mais longo, abaixo está a minha solução:

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

Deixe-me saber se alguém pode fazer um buraco


2


2
Esse trecho de código é suficiente para atender às suas necessidades parseFloat(num.toFixed(2))
— kva

1

Você não está nos dando uma imagem completa.

javascript:alert(parseFloat(1).toFixed(2))mostra 1,00 nos navegadores quando colo na barra de localização. No entanto, se você fizer algo posteriormente, ele será revertido.

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


shows 1 and not 1.00

Funciona no FF 50, Chrome 49 e 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

Eu tive que decidir entre as conversões parseFloat () e Number () antes de poder fazer a chamada toFixed (). Aqui está um exemplo de uma formatação de número de entrada de usuário pós-captura.

HTML:

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

Manipulador de eventos:

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

O código acima resultará na exceção TypeError. Observe que, embora o tipo de entrada html seja "number", a entrada do usuário é realmente um tipo de dados "string". No entanto, a função toFixed () pode ser invocada apenas em um objeto que é um número.

Meu código final teria a seguinte aparência:

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

A razão pela qual eu prefiro converter com Number () vs. parseFloat () é porque não preciso executar uma validação extra nem para uma sequência de entrada vazia nem para o valor NaN. A função Number () manipularia automaticamente uma string vazia e a zeraria.


0

Eu gosto:

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

Arredonde o número com 2 casas decimais e, em seguida, analise-o parseFloat() para retornar Number, não String, a menos que você não se importe se é String ou Number.


Eu acho que se o objetivo era exibir com precisão de 2 casas decimais, a análise do float vai mexer com isso. Por exemploparseFloat("1.00") // 1
— Stijn de Witt

0

Estenda o objeto Math com o método de precisão

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

aqui está outra solução para arredondar apenas o piso, ou seja, garantir que o valor calculado não seja maior que o valor original (às vezes necessário para transações):

Math.floor(num* 100 )/100;

0

Você pode tentar este código:

    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

Experimente o código abaixo:

function numberWithCommas(number) { 

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

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


-3

É assim que eu resolvo meu problema:

parseFloat(parseFloat(floatString).toFixed(2));
Ao utilizar nosso site, você reconhece que leu e compreendeu nossa Política de Cookies e nossa Política de Privacidade.
Licensed under cc by-sa 3.0 with attribution required.