Je souhaite formater un prix en JavaScript. Je voudrais une fonction qui prend un float
comme argument et renvoie un string
formaté comme ceci:
"$ 2,500.00"
Quelle est la meilleure façon de procéder?
javascript
formatting
currency
Daniel Magliola
la source
la source
formatNumber
en javascriptRéponses:
Number.prototype.toFixed
Cette solution est compatible avec tous les principaux navigateurs:
Tout ce dont vous avez besoin est d'ajouter le symbole monétaire (par exemple
"$" + profits.toFixed(2)
) et vous aurez votre montant en dollars.Fonction personnalisée
Si vous avez besoin d'utiliser
,
entre chaque chiffre, vous pouvez utiliser cette fonction:Utilisez-le comme ceci:
Si vous allez toujours utiliser "." et ',', vous pouvez les laisser hors de votre appel de méthode, et la méthode les par défaut pour vous.
Si votre culture a les deux symboles inversés (c'est-à-dire les Européens) et que vous souhaitez utiliser les valeurs par défaut, collez simplement les deux lignes suivantes dans la
formatMoney
méthode:Fonction personnalisée (ES6)
Si vous pouvez utiliser la syntaxe ECMAScript moderne (c'est-à-dire via Babel), vous pouvez utiliser cette fonction plus simple à la place:
la source
d
ett
être.
et,
respectivement afin de ne pas avoir à les spécifier à chaque fois. aussi, je recommande de modifier le début de lareturn
déclaration pour lirereturn s + '$' + [rest]
:, sinon vous n'obtiendrez pas de signe dollar.Intl.numberformat
Javascript a un formateur de nombres (qui fait partie de l'API Internationalisation).
JS fiddle
Utilisez
undefined
à la place du premier argument ('en-US'
dans l'exemple) pour utiliser les paramètres régionaux du système (les paramètres régionaux de l'utilisateur au cas où le code s'exécute dans un navigateur). Explication supplémentaire du code de paramètres régionaux .Voici une liste des codes de devise .
Intl.NumberFormat vs Number.prototype.toLocaleString
Une dernière note comparant cela à l'ancien.
toLocaleString
. Ils offrent tous deux essentiellement la même fonctionnalité. Cependant, toLocaleString dans ses anciennes incarnations (pré-Intl) ne prend pas réellement en charge les paramètres régionaux : il utilise les paramètres régionaux du système. Par conséquent, assurez-vous que vous utilisez la bonne version ( MDN suggère de vérifier l'existence deIntl
). De plus, les performances des deux sont les mêmes pour un seul élément, mais si vous avez beaucoup de nombres à formater, l'utilisationIntl.NumberFormat
est 70 fois plus rapide. Voici comment utilisertoLocaleString
:Quelques notes sur la prise en charge du navigateur
la source
Solution courte et rapide (fonctionne partout!)
L'idée derrière cette solution est de remplacer les sections correspondantes par la première correspondance et la virgule, c'est-à-dire
'$&,'
. L'appariement est effectué en utilisant l' approche Lookahead . Vous pouvez lire l'expression comme "correspondre à un nombre s'il est suivi d'une séquence de trois ensembles de nombres (un ou plusieurs) et un point" .TESTS:
DÉMO: http://jsfiddle.net/hAfMM/9571/
Solution courte étendue
Vous pouvez également étendre le prototype d'
Number
objet pour ajouter une prise en charge supplémentaire de n'importe quel nombre de décimales[0 .. n]
et de la taille des groupes de nombres[0 .. x]
:DÉMO / TESTS: http://jsfiddle.net/hAfMM/435/
Solution courte super étendue
Dans cette version super étendue, vous pouvez définir différents types de délimiteurs:
DÉMO / TESTS: http://jsfiddle.net/hAfMM/612/
la source
.replace(/(\d)(?=(\d{3})+(?:\.\d+)?$)/g, "$1,")
.Number.prototype.toMoney = (decimal=2) -> @toFixed(decimal).replace /(\d)(?=(\d{3})+(?:\.\d+)?$)/g, "$1,"
\.
par$
(fin de ligne), c'est-à-direthis.toFixed(0).replace(/(\d)(?=(\d{3})+$)/g, "$1,")
.$1,
. L'appariement est effectué en utilisant l' approche Lookahead . Vous pouvez lire l'expression comme "correspondre à un nombre s'il est suivi d'une séquence de trois ensembles de nombres (un ou plusieurs) et un point" .Jetez un œil à l' objet JavaScript Number et voyez s'il peut vous aider.
toLocaleString()
formatera un nombre en utilisant un séparateur de milliers spécifique à l'emplacement.toFixed()
arrondira le nombre à un nombre spécifique de décimales.Pour les utiliser en même temps, la valeur doit avoir son type changé de nouveau en nombre car ils produisent tous les deux une chaîne.
Exemple:
la source
toLocaleString
qui utilise les paramètres régionaux du système et une nouvelle (incompatible) qui provient de l'API ECMAScript Intl. Expliqué ici . Cette réponse semble être destinée à l'ancienne version.Ci-dessous, le code Patrick Desjardins (alias Daok) avec quelques commentaires ajoutés et quelques changements mineurs:
et voici quelques tests:
Les changements mineurs sont:
déplacé un peu le
Math.abs(decimals)
à faire uniquement quand il ne l'est pasNaN
.decimal_sep
ne peut plus être une chaîne vide (une sorte de séparateur décimal est un MUST)nous utilisons
typeof thousands_sep === 'undefined'
comme suggéré dans Comment déterminer au mieux si un argument n'est pas envoyé à la fonction JavaScript(+n || 0)
n'est pas nécessaire carthis
est unNumber
objetJS Fiddle
la source
parseInt
est appelé sur la valeur absolue de la partie INTEGER du nombre. La partie INTEGER ne peut pas commencer par ZERO sauf si c'est juste un ZERO! EtparseInt(0) === 0
soit octal ou décimal.0
est considéré comme octal parparseInt
. Mais dans ce code, il est IMPOSSIBLEparseInt
de recevoir016
en entrée (ou toute autre valeur au format octal), car l'argument passé àparseInt
est d'abord traité par laMath.abs
fonction. Il n'y a donc aucun moyenparseInt
de recevoir un nombre qui commence par zéro à moins que ce soit juste un zéro ou0.nn
(oùnn
sont des décimales). Mais les deux0
et les0.nn
chaînes seraient convertiesparseInt
en un simple zéro comme supposé être.accounting.js est une petite bibliothèque JavaScript pour le formatage des nombres, de l'argent et des devises.
la source
Si le montant est un nombre, disons
-123
, alorsproduira la chaîne
"-$123.00"
.Voici un exemple de travail complet .
la source
minimumFractionDigits: 0
Voici le meilleur formateur d'argent js que j'ai vu:
Il a été reformaté et emprunté ici: https://stackoverflow.com/a/149099/751484
Vous devrez fournir votre propre indicateur de devise (vous avez utilisé $ ci-dessus).
Appelez-le comme ceci (bien que notez que les arguments par défaut sont 2, virgule et point, donc vous n'avez pas besoin de fournir d'arguments si c'est votre préférence):
la source
var
déclaration.Il y a déjà d'excellentes réponses ici. Voici une autre tentative, juste pour le plaisir:
Et quelques tests:
Modifié: maintenant, il gérera également les nombres négatifs
la source
i = orig.length - i - 1
dans le rappel. Pourtant, une traversée de moins du tableau.reduce
méthode a été introduite dans Ecmascript 1.8, et n'est pas prise en charge dans Internet Explorer 8 et ci-dessous.Fonctionne pour tous les navigateurs actuels
Permet
toLocaleString
de formater une devise dans sa représentation sensible à la langue (en utilisant les codes de devise ISO 4217 ).Exemple d'extraits de code Rand sud-africains pour @avenmore
la source
Je pense que ce que tu veux c'est
f.nettotal.value = "$" + showValue.toFixed(2);
la source
Numeral.js - une bibliothèque js pour un formatage facile des nombres par @adamwdraper
la source
Ok, d'après ce que vous avez dit, j'utilise ceci:
Je suis ouvert aux suggestions d'amélioration (je préfère ne pas inclure YUI juste pour le faire :-)) Je sais déjà que je devrais détecter le "." au lieu de simplement l'utiliser comme séparateur décimal ...
la source
J'utilise la bibliothèque Globalize (de Microsoft):
C'est un excellent projet pour localiser des nombres, des devises et des dates et les avoir automatiquement formatés de la bonne façon en fonction des paramètres régionaux de l'utilisateur! ... et bien qu'il s'agisse d'une extension jQuery, c'est actuellement une bibliothèque 100% indépendante. Je vous suggère à tous de l'essayer! :)
la source
javascript-number-formatter (anciennement chez Google Code )
Seulement 75 lignes, y compris les informations de licence MIT, les lignes vierges et les commentaires.#,##0.00
ou avec négation-000.####
.# ##0,00
,#,###.##
,#'###.##
ou tout type de symbole non-numérotation.#,##,#0.000
ou#,###0.##
sont tous valides.##,###,##.#
ou0#,#00#.###0#
tout va bien.format( "0.0000", 3.141592)
.(extrait de son README)
la source
+1 à Jonathan M pour avoir fourni la méthode originale. Puisqu'il s'agit explicitement d'un formateur de devises, j'ai continué et ajouté le symbole monétaire (par défaut `` $ '') à la sortie, et ajouté une virgule par défaut comme séparateur de milliers. Si vous ne voulez pas réellement de symbole monétaire (ou de séparateur de milliers), utilisez simplement "" (chaîne vide) comme argument pour cela.
la source
+n || 0
c'est la seule chose qui me semble un peu bizarre (de toute façon pour moi).this
est un nom de variable parfaitement utile. Iln
peut être nécessaire de le convertir pour que vous puissiez enregistrer 3 caractères au moment de la définition à une époque où la RAM et la bande passante étaient comptées en Ko, mais il est tout simplement obscur à une époque où le minificateur s'occupe de tout cela avant qu'il n'atteigne jamais la production. Les autres micro-optimisations intelligentes sont au moins discutables.Il existe un port javascript de la fonction PHP "number_format".
Je le trouve très utile car il est facile à utiliser et reconnaissable pour les développeurs PHP.
(Bloc de commentaires de l'original , inclus ci-dessous pour des exemples et des crédits à échéance)
la source
Une méthode plus courte (pour insérer un espace, une virgule ou un point) avec une expression régulière?
la source
Je n'ai rien vu de tel. C'est assez concis et facile à comprendre.
Voici une version avec plus d'options dans la sortie finale pour permettre le formatage de différentes devises dans différents formats de localité.
la source
La réponse de Patrick Desjardins semble bonne, mais je préfère mon javascript simple. Voici une fonction que je viens d'écrire pour prendre un nombre et le retourner au format monétaire (moins le signe dollar)
la source
La partie principale est d'insérer les mille séparateurs, ce qui pourrait être fait comme ceci:
la source
Il est intégré dans
function
toFixed enjavascript
la source
toFixed()
toFixed()
est une fonction de l'Number
objet et ne fonctionnera pasvar num
si c'était unString
, donc le contexte supplémentaire m'a aidé.De WillMaster .
la source
Je suggère la classe NumberFormat de l' API de visualisation Google .
Vous pouvez faire quelque chose comme ça:
J'espère que ça aide.
la source
Cela peut être un peu en retard, mais voici une méthode que je viens de mettre au point pour un collègue pour ajouter une
.toCurrencyString()
fonction sensible aux paramètres régionaux à tous les nombres. L'internalisation est uniquement pour le regroupement de numéros, PAS le signe de la devise - si vous sortez des dollars, utilisez-les"$"
tels qu'ils sont fournis, car$123 4567
au Japon ou en Chine, c'est le même nombre d'USD qu'aux$1,234,567
États-Unis. Si vous produisez de l'euro / etc., Changez le symbole monétaire de"$"
.Déclarez cela n'importe où dans votre HEAD ou partout où cela est nécessaire, juste avant de l'utiliser:
Alors vous avez terminé! Utilisez-le
(number).toCurrencyString()
partout où vous en avez besoin pour sortir le numéro en tant que devise.la source
Comme d'habitude, il existe plusieurs façons de faire la même chose, mais j'éviterais de l'utiliser
Number.prototype.toLocaleString
car il peut renvoyer des valeurs différentes en fonction des paramètres utilisateur.Je ne recommande pas non plus d'étendre le
Number.prototype
- l'extension des prototypes d'objets natifs est une mauvaise pratique car elle peut provoquer des conflits avec le code d'autres personnes (par exemple bibliothèques / frameworks / plugins) et peut ne pas être compatible avec les futures implémentations / versions JavaScript.Je crois que les expressions régulières sont la meilleure approche pour le problème, voici ma mise en œuvre:
édité le 30/08/2010: ajout d'une option pour définir le nombre de chiffres décimaux. édité le 23/08/2011: ajout d'une option pour régler le nombre de chiffres décimaux à zéro.
la source
Voici quelques solutions, toutes réussissent la suite de tests, la suite de tests et le benchmark inclus, si vous voulez copier et coller pour tester, essayez This Gist .
Méthode 0 (RegExp)
Base sur https://stackoverflow.com/a/14428340/1877620 , mais corrigez s'il n'y a pas de point décimal.
Méthode 1
Méthode 2 (Split to Array)
Méthode 3 (boucle)
Exemple d'utilisation
Séparateur
Si nous voulons un séparateur de milliers personnalisé ou un séparateur décimal, utilisez
replace()
:Suite de tests
Référence
la source
la source
Une option simple pour un placement correct des virgules en inversant la chaîne en premier et l'expression rationnelle de base.
la source
J'ai trouvé cela sur: accounting.js . C'est très facile et correspond parfaitement à mon besoin.
la source
$('#price').val( accounting.formatMoney(OOA, { symbol: "€", precision: 2,thousand: ".", decimal :",",format: "%v%s" } ) );
- show 1.000,00 E