Gostaria de formatar um preço em JavaScript. Eu gostaria de uma função que leva a float
como argumento e retorna um string
formatado como este:
"$ 2,500.00"
Qual é a melhor forma de fazer isso?
javascript
formatting
currency
Daniel Magliola
fonte
fonte
formatNumber
no javascriptRespostas:
Number.prototype.toFixed
Esta solução é compatível com todos os principais navegadores principais:
Tudo que você precisa é adicionar o símbolo da moeda (por exemplo
"$" + profits.toFixed(2)
) e você terá seu valor em dólares.Função personalizada
Se você precisar usar
,
entre cada dígito, poderá usar esta função:Use-o assim:
Se você sempre usará '.' e ',', você pode excluí-los da chamada de método, e o método os padronizará para você.
Se sua cultura possui os dois símbolos invertidos (europeus) e você deseja usar os padrões, cole as duas linhas a seguir no
formatMoney
método:Função personalizada (ES6)
Se você pode usar a sintaxe moderna do ECMAScript (por exemplo, através do Babel), pode usar esta função mais simples:
fonte
d
et
para.
e e,,
respectivamente, para não precisar especificá-los sempre. Além disso, eu recomendo modificar o início dareturn
declaração para lerreturn s + '$' + [rest]
:, caso contrário você não receberá um cifrão.Intl.numberformat
Javascript tem um formatador de números (parte da API de internacionalização).
JS violino
Use
undefined
no lugar do primeiro argumento ('en-US'
no exemplo) para usar a localidade do sistema (a localidade do usuário, caso o código esteja sendo executado em um navegador). Mais explicações sobre o código de localidade .Aqui está uma lista dos códigos de moeda .
Intl.NumberFormat vs Number.prototype.toLocaleString
Uma nota final comparando isso com o anterior.
toLocaleString
. Ambos oferecem essencialmente a mesma funcionalidade. No entanto, toLocaleString em suas encarnações mais antigas (pré-Intl) na verdade não suporta localidades : ele usa a localidade do sistema. Portanto, verifique se você está usando a versão correta (o MDN sugere verificar a existência deIntl
). Além disso, o desempenho de ambos é o mesmo para um único item, mas se você tiver muitos números para formatar, o usoIntl.NumberFormat
será aproximadamente 70 vezes mais rápido. Aqui está como usartoLocaleString
:Algumas notas sobre o suporte ao navegador
fonte
Solução curta e rápida (funciona em qualquer lugar!)
A idéia por trás dessa solução é substituir as seções correspondentes pela primeira correspondência e vírgula, ou seja
'$&,'
. A correspondência é feita usando a abordagem lookahead . Você pode ler a expressão como "corresponder a um número se for seguida por uma sequência de três conjuntos de números (um ou mais) e um ponto" .ENSAIOS:
DEMO: http://jsfiddle.net/hAfMM/9571/
Solução curta estendida
Você também pode estender o protótipo de
Number
objeto para adicionar suporte adicional a qualquer número de casas decimais[0 .. n]
e ao tamanho dos grupos de números[0 .. x]
:DEMO / TESTES: http://jsfiddle.net/hAfMM/435/
Solução curta super estendida
Nesta versão super estendida, você pode definir diferentes tipos de delimitadores:
DEMO / TESTES: http://jsfiddle.net/hAfMM/612/
fonte
.replace(/(\d)(?=(\d{3})+(?:\.\d+)?$)/g, "$1,")
.Number.prototype.toMoney = (decimal=2) -> @toFixed(decimal).replace /(\d)(?=(\d{3})+(?:\.\d+)?$)/g, "$1,"
\.
por$
(fim de linha), iethis.toFixed(0).replace(/(\d)(?=(\d{3})+$)/g, "$1,")
.$1,
. A correspondência é feita usando a abordagem lookahead . Você pode ler a expressão como "corresponder a um número se for seguida por uma sequência de três conjuntos de números (um ou mais) e um ponto" .Dê uma olhada no objeto JavaScript Number e veja se ele pode ajudá-lo.
toLocaleString()
formatará um número usando o separador de milhares específico do local.toFixed()
arredondará o número para um número específico de casas decimais.Para usá-los ao mesmo tempo, o valor deve ter seu tipo alterado de volta para um número, porque ambos produzem uma sequência.
Exemplo:
fonte
toLocaleString
que use o código do idioma do sistema e uma nova (incompatível) proveniente da API ECMAScript Intl. Explicado aqui . Esta resposta parece ser destinada à versão antiga.Abaixo está o código de Patrick Desjardins (também conhecido como Daok) com alguns comentários adicionados e algumas pequenas alterações:
e aqui alguns testes:
As pequenas alterações são:
mudou um pouco a
Math.abs(decimals)
ser feito apenas quando não éNaN
.decimal_sep
não pode mais ser uma string vazia (um tipo de separador decimal é obrigatório)usamos
typeof thousands_sep === 'undefined'
como sugerido em Qual a melhor forma de determinar se um argumento não é enviado para a função JavaScript(+n || 0)
não é necessário porquethis
é umNumber
objetoJS Fiddle
fonte
parseInt
chama-se sobre o valor absoluto da parte inteira do número. A parte INTEGER não pode começar com ZERO, a menos que seja apenas um ZERO! EparseInt(0) === 0
octal ou decimal.0
é considerado octal porparseInt
. Mas neste código é IMPOSSÍVELparseInt
receber016
como entrada (ou qualquer outro valor formatado octal), porque o argumento passadoparseInt
é o primeiro processado pelaMath.abs
função. Portanto, não há comoparseInt
receber um número que começa com zero, a menos que seja apenas zero ou0.nn
(ondenn
são decimais). Mas ambos0
e0.nn
strings seriam convertidosparseInt
em um ZERO simples, como deveria ser.accounting.js é uma pequena biblioteca JavaScript para formatação de números, dinheiro e moeda.
fonte
Se quantidade é um número, digamos
-123
, entãoirá produzir a string
"-$123.00"
.Aqui está um exemplo completo de trabalho .
fonte
minimumFractionDigits: 0
Aqui está o melhor formatador js money que eu já vi:
Foi reformatado e emprestado a partir daqui: https://stackoverflow.com/a/149099/751484
Você precisará fornecer seu próprio designador de moeda (você usou $ acima).
Chame assim (embora observe que os argumentos padrão são 2, vírgula e ponto; portanto, você não precisa fornecer argumentos, se essa for a sua preferência):
fonte
var
declaração.Já existem ótimas respostas aqui. Aqui está outra tentativa, apenas por diversão:
E alguns testes:
Editado: agora ele também manipula números negativos
fonte
i = orig.length - i - 1
no retorno de chamada. Ainda assim, menos uma travessia da matriz.reduce
método foi introduzido no Ecmascript 1.8 e não é suportado no Internet Explorer 8 e abaixo.Funciona para todos os navegadores atuais
Use
toLocaleString
para formatar uma moeda em sua representação sensível ao idioma (usando códigos de moeda ISO 4217 ).Exemplo de trechos de código Rand sul-africano para @avenmore
fonte
Eu acho que o que você quer é
f.nettotal.value = "$" + showValue.toFixed(2);
fonte
Numeral.js - uma biblioteca js para facilitar a formatação de números por @adamwdraper
fonte
Ok, com base no que você disse, eu estou usando isso:
Estou aberto a sugestões de melhorias (eu preferiria não incluir a YUI apenas para fazer isso :-)) Eu já sei que deveria estar detectando o "." em vez de apenas usá-lo como separador decimal ...
fonte
Eu uso a biblioteca Globalize (da Microsoft):
É um ótimo projeto localizar números, moedas e datas e formatá-los automaticamente da maneira certa, de acordo com a localidade do usuário! ... e, apesar de ser uma extensão do jQuery, atualmente é uma biblioteca 100% independente. Eu sugiro a todos que experimentem! :)
fonte
formatador de número javascript (anteriormente no Google Code )
Apenas 75 linhas, incluindo informações de licença do MIT, linhas em branco e comentários.#,##0.00
ou com negação-000.####
.# ##0,00
,#,###.##
,#'###.##
ou qualquer tipo de símbolo não-numeração.#,##,#0.000
ou#,###0.##
são todos válidos.##,###,##.#
ou0#,#00#.###0#
estão todos bem.format( "0.0000", 3.141592)
.(trecho do seu README)
fonte
+1 a Jonathan M por fornecer o método original. Como este é explicitamente um formatador de moeda, fui adiante e adicionei o símbolo da moeda (o padrão é '$') à saída e adicionei uma vírgula padrão como separador de milhares. Se você realmente não deseja um símbolo de moeda (ou separador de milhares), basta usar "" (sequência vazia) como argumento para isso.
fonte
+n || 0
é a única coisa que parece um pouco estranha (para mim de qualquer maneira).this
é um nome de variável perfeitamente útil. Convertê-lo paran
salvar três caracteres no momento da definição pode ter sido necessário em uma época em que a RAM e a largura de banda eram contadas em KB, mas é simplesmente ofuscante em uma época em que o minifier cuidará de tudo isso antes de atingir a produção. As outras micro otimizações inteligentes são pelo menos discutíveis.Existe uma porta javascript da função PHP "number_format".
Acho muito útil, pois é fácil de usar e reconhecível pelos desenvolvedores de PHP.
(Bloco de comentários do original , incluído abaixo para exemplos e crédito, quando devido)
fonte
Um método mais curto (para inserir espaço, vírgula ou ponto) com expressão regular?
fonte
Não vi nada assim. É bem conciso e fácil de entender.
Aqui está uma versão com mais opções na saída final para permitir a formatação de diferentes moedas em diferentes formatos de localidade.
fonte
A resposta de Patrick Desjardins parece boa, mas eu prefiro meu javascript simples. Aqui está uma função que acabei de escrever para pegar um número e devolvê-lo no formato de moeda (menos o cifrão)
fonte
A parte principal é inserir os mil separadores, que poderiam ser feitos assim:
fonte
Há um built-in
function
toFixed emjavascript
fonte
toFixed()
toFixed()
é uma função doNumber
objeto e não funcionarávar num
se for umString
, portanto o contexto adicional me ajudou.De WillMaster .
fonte
Sugiro a classe NumberFormat da API de visualização do Google .
Você pode fazer algo assim:
Espero que ajude.
fonte
Pode ser um pouco tarde, mas aqui está um método que acabei de criar para um colega de trabalho para adicionar uma
.toCurrencyString()
função com reconhecimento de localidade a todos os números. A internalização é apenas para agrupamento de números, NÃO para o sinal de moeda - se você estiver produzindo dólares, use"$"
como fornecido, porque$123 4567
no Japão ou na China é o mesmo número de dólares que$1,234,567
aqui nos EUA. Se você estiver produzindo euro / etc., Altere o sinal de moeda de"$"
.Declare isso em qualquer lugar do seu HEAD ou sempre que necessário, antes de precisar usá-lo:
Então você está pronto! Use em
(number).toCurrencyString()
qualquer lugar que você precise exibir o número como moeda.fonte
Como geralmente, existem várias maneiras de fazer a mesma coisa, mas eu evitaria usá-
Number.prototype.toLocaleString
lo, pois ele pode retornar valores diferentes com base nas configurações do usuário.Também não recomendo estender o
Number.prototype
protótipo de objetos nativos é uma prática ruim, pois pode causar conflitos com o código de outras pessoas (por exemplo, bibliotecas / estruturas / plugins) e pode não ser compatível com futuras implementações / versões de JavaScript.Acredito que expressões regulares são a melhor abordagem para o problema, aqui está a minha implementação:
editado em 30/08/2010: opção adicionada para definir o número de dígitos decimais. editado em 23/08/2011: opção adicionada para definir o número de dígitos decimais como zero.
fonte
Aqui estão algumas soluções: todas passam no conjunto de testes, no conjunto de testes e no benchmark incluídos. Se você deseja copiar e colar para testar, tente This Gist .
Método 0 (RegExp)
Baseie-se em https://stackoverflow.com/a/14428340/1877620 , mas corrija se não houver ponto decimal.
Método 1
Método 2 (Dividir em matriz)
Método 3 (Loop)
Exemplo de uso
Separador
Se quisermos separador de milhares personalizado ou separador decimal, use
replace()
:Suíte de teste
Referência
fonte
fonte
Uma opção simples para o posicionamento correto da vírgula, revertendo a cadeia de caracteres primeiro e a regexp básica.
fonte
Encontrei isso em: accounting.js . É muito fácil e se encaixa perfeitamente na minha necessidade.
fonte
$('#price').val( accounting.formatMoney(OOA, { symbol: "€", precision: 2,thousand: ".", decimal :",",format: "%v%s" } ) );
- mostrar 1.000,00 E