web-dev-qa-db-fra.com

Formatage des nombres JQuery

Il y a beaucoup trop de questions et de réponses sur cette fonctionnalité de base, je ne peux pas voir le bois pour les arbres. 

En Java, il n’existe qu’une réponse simple (Java.text.NumberFormat et ses sous-classes); je suis donc sûr que la majorité des plug-ins, des questions et des réponses finiront par devenir un standard de facto pour JQuery.

Ce plugin est le meilleur que j'ai trouvé jusqu'à présent, mais je ne sais pas s'il est encore développé, s'il est mature, etc.

http://plugins.jquery.com/project/numberformatter

Y a-t-il une meilleure solution? Est-il assez mature/actif pour compter?


Modifier:

J'aimerais pouvoir formater des devises, des nombres décimaux et des entiers basés sur les mêmes modèles de format que Java utilise, afin que les données reçues côté client puissent être formatées sans les envoyer au préalable au serveur. 

par exemple. 

Formatez 1000 en $1,000 ou 1,000.00 etc. (le support des paramètres régionaux est Nice)

On dirait que http://plugins.jquery.com/project/numberformatter fait le travail mais la question était: "est-ce que j'utilise la bonne chose?" ou "Y a-t-il une meilleure façon de le faire?"

36
Eran Medan

Je recommanderais de regarder cet article pour savoir comment utiliser javascript pour gérer le formatage de base:

function addCommas(nStr)
{
    nStr += '';
    x = nStr.split('.');
    x1 = x[0];
    x2 = x.length > 1 ? '.' + x[1] : '';
    var rgx = /(\d+)(\d{3})/;
    while (rgx.test(x1)) {
        x1 = x1.replace(rgx, '$1' + ',' + '$2');
    }
    return x1 + x2;
}

source: http://www.mredkj.com/javascript/numberFormat.html

Bien que jQuery puisse vous faciliter la vie de mille façons différentes, je dirais que c'est exagéré pour cela. N'oubliez pas que jQuery peut être assez volumineux et que le navigateur de votre utilisateur doit le télécharger lorsque vous l'utilisez sur une page. 

Lorsque vous utilisez jQuery, vous devez vous retirer et demander si sa contribution est suffisante pour justifier les frais supplémentaires liés au téléchargement de la bibliothèque.

Si vous avez besoin d'un formatage avancé (comme la localisation dans le plugin que vous avez lié), ou si vous incluez déjà jQuery, il peut être intéressant de regarder un plugin jQuery.

Note latérale - consultez ceci si vous voulez vous marrer à propos de l’utilisation excessive de jQuery.

64
Abe Miessler

En utilisant le plugin jQuery Number Format , vous pouvez obtenir un numéro formaté de l’une des trois manières suivantes:

// Return as a string
$.number( 1234.5678, 2 ); // Returns '1,234.57'

// Place formatted number directly in an element:
$('#mynum').number( 1234.5678 ); // #mynum would then contain '1,235'

// Replace existing number values in any element
$('span.num').number( true, 2 ); // Formats and replaces existing numbers in those elements.

Si vous n'aimez pas le format ou si vous avez besoin de localiser, d'autres paramètres vous permettent de choisir le format du nombre:

.number (theNumber, decimalPlaces, decimalSeparator, milliersSeparator)

Vous pouvez également obtenir jQuery Number Format de GitHub .

19
Quadrant6

Si vous devez gérer plusieurs devises, plusieurs formats de nombres, etc., je peux recommander autoNumeric . Fonctionne un régal. L'utilise avec succès depuis plusieurs années maintenant.

3
Luftwaffle

Le développement du navigateur progresse:

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number/toLocaleString

 Number.toLocaleString(locale);

 // E.g.
 parseFloat("1234567.891").toLocaleString(window.document.documentElement.lang);
 "1,234,567.891"
3
elixon

En associant ce concept http://www.mredkj.com/javascript/numberFormat.html et $('.number').formatNumber();, vous pouvez utiliser la ligne de code suivante;

par exemple. <td class="number">1172907.50</td> sera formaté comme <td class="number">1,172,907.50</td>

$('.number').text(function () { 
    var str = $(this).html() + ''; 
    x = str.split('.'); 
    x1 = x[0]; x2 = x.length > 1 ? '.' + x[1] : ''; 
    var rgx = /(\d+)(\d{3})/; 
    while (rgx.test(x1)) { 
        x1 = x1.replace(rgx, '$1' + ',' + '$2'); 
    } 
    $(this).html(x1 + x2); 
});
1
user3728612

J'ai écrit un analogue JavaScript d'une fonction PHP number_format sur une base de la fonction Abe Miessler addCommas. Pourrait être utile.

number_format = function (number, decimals, dec_point, thousands_sep) {
        number = number.toFixed(decimals);

        var nstr = number.toString();
        nstr += '';
        x = nstr.split('.');
        x1 = x[0];
        x2 = x.length > 1 ? dec_point + x[1] : '';
        var rgx = /(\d+)(\d{3})/;

        while (rgx.test(x1))
            x1 = x1.replace(rgx, '$1' + thousands_sep + '$2');

        return x1 + x2;
    }

Par exemple:

var some_number = number_format(42661.55556, 2, ',', ' '); //gives 42 661,56
1
slashka

http://jquerypriceformat.com/#examples

https://github.com/flaviosilveira/Jquery-Price-Format

html entrée en cours d'exécution pour la chance en direct.

<input type="text" name="v7"  class="priceformat"/>
<input type="text" name="v8"  class="priceformat"/>


$('.priceformat').each(function( index ) {
    $(this).priceFormat({ prefix: '',  thousandsSeparator: '' });
});

//5000.00

//5.000,00

//5,000.00

1
Limitless isa

http://locutus.io/php/strings/number_format/

module.exports = function number_format (number, decimals, decPoint, thousandsSep) { // eslint-disable-enter code hereline camelcase
  //  discuss at: http://locutus.io/php/number_format/
  // original by: Jonas Raoni Soares Silva (http://www.jsfromhell.com)
  // improved by: Kevin van Zonneveld (http://kvz.io)
  // improved by: davook
  // improved by: Brett Zamir (http://brett-zamir.me)
  // improved by: Brett Zamir (http://brett-zamir.me)
  // improved by: Theriault (https://github.com/Theriault)
  // improved by: Kevin van Zonneveld (http://kvz.io)
  // bugfixed by: Michael White (http://getsprink.com)
  // bugfixed by: Benjamin Lupton
  // bugfixed by: Allan Jensen (http://www.winternet.no)
  // bugfixed by: Howard Yeend
  // bugfixed by: Diogo Resende
  // bugfixed by: Rival
  // bugfixed by: Brett Zamir (http://brett-zamir.me)
  //  revised by: Jonas Raoni Soares Silva (http://www.jsfromhell.com)
  //  revised by: Luke Smith (http://lucassmith.name)
  //    input by: Kheang Hok Chin (http://www.distantia.ca/)
  //    input by: Jay Klehr
  //    input by: Amir Habibi (http://www.residence-mixte.com/)
  //    input by: Amirouche
  //   example 1: number_format(1234.56)
  //   returns 1: '1,235'
  //   example 2: number_format(1234.56, 2, ',', ' ')
  //   returns 2: '1 234,56'
  //   example 3: number_format(1234.5678, 2, '.', '')
  //   returns 3: '1234.57'
  //   example 4: number_format(67, 2, ',', '.')
  //   returns 4: '67,00'
  //   example 5: number_format(1000)
  //   returns 5: '1,000'
  //   example 6: number_format(67.311, 2)
  //   returns 6: '67.31'
  //   example 7: number_format(1000.55, 1)
  //   returns 7: '1,000.6'
  //   example 8: number_format(67000, 5, ',', '.')
  //   returns 8: '67.000,00000'
  //   example 9: number_format(0.9, 0)
  //   returns 9: '1'
  //  example 10: number_format('1.20', 2)
  //  returns 10: '1.20'
  //  example 11: number_format('1.20', 4)
  //  returns 11: '1.2000'
  //  example 12: number_format('1.2000', 3)
  //  returns 12: '1.200'
  //  example 13: number_format('1 000,50', 2, '.', ' ')
  //  returns 13: '100 050.00'
  //  example 14: number_format(1e-8, 8, '.', '')
  //  returns 14: '0.00000001'

  number = (number + '').replace(/[^0-9+\-Ee.]/g, '')
  var n = !isFinite(+number) ? 0 : +number
  var prec = !isFinite(+decimals) ? 0 : Math.abs(decimals)
  var sep = (typeof thousandsSep === 'undefined') ? ',' : thousandsSep
  var dec = (typeof decPoint === 'undefined') ? '.' : decPoint
  var s = ''

  var toFixedFix = function (n, prec) {
    if (('' + n).indexOf('e') === -1) {
      return +(Math.round(n + 'e+' + prec) + 'e-' + prec)
    } else {
      var arr = ('' + n).split('e')
      var sig = ''
      if (+arr[1] + prec > 0) {
        sig = '+'
      }
      return (+(Math.round(+arr[0] + 'e' + sig + (+arr[1] + prec)) + 'e-' + prec)).toFixed(prec)
    }
  }

  // @todo: for IE parseFloat(0.55).toFixed(0) = 0;
  s = (prec ? toFixedFix(n, prec).toString() : '' + Math.round(n)).split('.')
  if (s[0].length > 3) {
    s[0] = s[0].replace(/\B(?=(?:\d{3})+(?!\d))/g, sep)
  }
  if ((s[1] || '').length < prec) {
    s[1] = s[1] || ''
    s[1] += new Array(prec - s[1].length + 1).join('0')
  }

  return s.join(dec)
}
0
ezwey