web-dev-qa-db-fra.com

Javascript mille séparateur / format de chaîne

Existe-t-il une fonction en Javascript pour le formatage du nombre et des chaînes?

Je cherche un moyen de séparateur de milliers pour les chaînes ou les nombres ... (comme String.Format In c #)

javascriptstringnumbersformat
76
LostLord

Mise à jour (7 ans plus tard)

La référence citée dans la réponse originale ci-dessous était fausse. Il est une fonction intégrée pour cela, ce qui est exactement ce que kaiser suggère ci-dessous: toLocaleString

Alors tu peux faire:

(1234567.89).toLocaleString('en')              // for numeric input
parseFloat("1234567.89").toLocaleString('en')  // for string input

La fonction implémentée ci-dessous fonctionne également, mais n'est tout simplement pas nécessaire.

(Je pensais avoir peut-être de la chance et découvrir que cela était nécessaire en 2010, mais non. Selon cette référence plus fiable , toLocaleString fait partie de la norme depuis ECMAScript 3rd Edition [1999], ce qui signifie que cela aurait été pris en charge dès IE 5.5 .)

Réponse originale

Selon cette référence , il n’existe pas de fonction intégrée permettant d’ajouter des virgules à un nombre. Mais cette page inclut un exemple sur la façon de le coder vous-même:

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

Edit: Pour inversement (convertir une chaîne avec des virgules en nombre), vous pouvez procéder de la manière suivante:

parseFloat("1,234,567.89".replace(/,/g,''))
118
Tim Goodman

Si est à propos de localiser des séparateurs de milliers, des délimiteurs et des séparateurs décimaux, procédez comme suit:

// --> numObj.toLocaleString( [locales [, options] ] )
parseInt( number ).toLocaleString();

Vous pouvez utiliser plusieurs options (et même des paramètres régionaux avec des solutions de secours):

number = 123456.7089;

result  = parseInt( number ).toLocaleString() + "<br>";
result += number.toLocaleString( 'de-DE' ) + "<br>";
result += number.toLocaleString( 'ar-EG' ) + "<br>";
result += number.toLocaleString( 'ja-JP', { 
  style           : 'currency',
  currency        : 'JPY',
  currencyDisplay : 'symbol',
  useGrouping     : true
} ) + "<br>";
result += number.toLocaleString( [ 'jav', 'en' ], { 
  localeMatcher            : 'lookup',
  style                    : 'decimal',
  minimumIntegerDigits     : 2,
  minimumFractionDigits    : 2,
  maximumFractionDigits    : 3,
  minimumSignificantDigits : 2,
  maximumSignificantDigits : 3
} ) + "<br>";

var el = document.getElementById( 'result' );
el.innerHTML = result;
<div id="result"></div>

Détails sur le page info MDN .

Edit: Commentateur @ J'aime Serena ajoute ce qui suit:

Pour prendre en charge les navigateurs dont les paramètres régionaux ne sont pas l'anglais et pour lesquels nous souhaitons toujours utiliser le formatage anglais, utilisez value.toLocaleString('en'). Fonctionne également pour la virgule flottante.

121
kaiser

Mise à jour à l'aide de la prise en charge de la recherche après vérification, conformément aux modifications apportées à ECMAScript2018.
Pour une compatibilité ascendante, faites défiler vers le bas pour voir la solution originale.

Une expression régulière peut être utilisée, notamment pour traiter de gros nombres stockés sous forme de chaînes.

const format = num => 
    String(num).replace(/(?<!\..*)(\d)(?=(?:\d{3})+(?:\.|$))/g, '$1,')

;[
    format(100),                           // "100"
    format(1000),                          // "1,000"
    format(1e10),                          // "10,000,000,000"  
    format(1000.001001),                   // "1,000.001001"
    format('100000000000000.001001001001') // "100,000,000,000,000.001001001001
]
    .forEach(n => console.log(n))

"Explication verbale d'expression régulière (regex101.com)flow diagram

Cette réponse originale peut ne pas être requise mais peut être utilisée pour la compatibilité ascendante.

En essayant de gérer cela avec une seule expression régulière (sans rappel) , ma capacité actuelle me fait défaut, faute d'une apparence négative en Javascript ... jamais moins il existe une autre alternative concise qui fonctionne dans la plupart des cas généraux - en tenant compte de toute virgule décimale en ignorant les correspondances pour lesquelles l’index de la correspondance apparaît après l’index d’une période.

const format = num => {
    const n = String(num),
          p = n.indexOf('.')
    return n.replace(
        /\d(?=(?:\d{3})+(?:\.|$))/g,
        (m, i) => p < 0 || i < p ? `${m},` : m
    )
}

;[
    format(100),                           // "100"
    format(1000),                          // "1,000"
    format(1e10),                          // "10,000,000,000"  
    format(1000.001001),                   // "1,000.001001"
    format('100000000000000.001001001001') // "100,000,000,000,000.001001001001
]
    .forEach(n => console.log(n))

"Explication verbale d'expression régulière (regex101.com)

flow diagram

28
Emissary

Il y a un plugin pour le nombre jQuery Nice: https://github.com/teamdf/jquery-number

Il vous permet de modifier n’importe quel nombre dans le format de votre choix, avec des options pour les chiffres décimaux et des caractères de séparation pour décimal et mille:

$.number(12345.4556, 2);          // -> 12,345.46
$.number(12345.4556, 3, ',', ' ') // -> 12 345,456

Vous pouvez l'utiliser directement dans les champs de saisie, ce qui est plus pratique, en utilisant les mêmes options que ci-dessus:

$("input").number(true, 2);

Ou vous pouvez appliquer à tout un ensemble d'éléments DOM à l'aide du sélecteur:

$('span.number').number(true, 2);
9
qdev
// thousand separates a digit-only string using commas
// by element:  onkeyup = "ThousandSeparate(this)"
// by ID:       onkeyup = "ThousandSeparate('txt1','lbl1')"
function ThousandSeparate()
{
    if (arguments.length == 1)
    {
        var V = arguments[0].value;
        V = V.replace(/,/g,'');
        var R = new RegExp('(-?[0-9]+)([0-9]{3})'); 
        while(R.test(V))
        {
            V = V.replace(R, '$1,$2');
        }
        arguments[0].value = V;
    }
    else  if ( arguments.length == 2)
    {
        var V = document.getElementById(arguments[0]).value;
        var R = new RegExp('(-?[0-9]+)([0-9]{3})'); 
        while(R.test(V))
        {
            V = V.replace(R, '$1,$2');
        }
        document.getElementById(arguments[1]).innerHTML = V;
    }
    else return false;
}
5
h.foroutan

J'utilise ceci:

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

source: lien

4
Abhishek Goel
var number = 35002343;

console.log(number.toLocaleString());

pour la référence, vous pouvez vérifier ici https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number/toLocaleString

4
vikashraj144

Vous pouvez utiliser javascript. ci-dessous sont le code, il ne restera que accept numérique et un dot

voici le javascript

<script >

            function FormatCurrency(ctrl) {
                //Check if arrow keys are pressed - we want to allow navigation around textbox using arrow keys
                if (event.keyCode == 37 || event.keyCode == 38 || event.keyCode == 39 || event.keyCode == 40) {
                    return;
                }

                var val = ctrl.value;

                val = val.replace(/,/g, "")
                ctrl.value = "";
                val += '';
                x = val.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');
                }

                ctrl.value = x1 + x2;
            }

            function CheckNumeric() {
                return event.keyCode >= 48 && event.keyCode <= 57 || event.keyCode == 46;
            }

  </script>

HTML

<input type="text" onkeypress="return CheckNumeric()" onkeyup="FormatCurrency(this)" />

DEMO JSFIDDLE

3
Awtszs
number = 123456.7089;
result = parseInt( number ).toLocaleString() + "<br>";
result = number.toLocaleString( 'pt-BR' ) + "<br>";

var el = document.getElementById( 'result' );
el.innerHTML = result;

<div id="result"></div>
2
Ricardo

Tout ce que vous avez à faire est simplement this :

123000.9123.toLocaleString()
//result will be "123,000.912"
1
Ezeewei

PHP.js a une fonction appelée number_format . Si vous connaissez PHP cela fonctionne exactement de la même manière .

1
istvanp

Combinaison de solutions pour réagir

  let converter = Intl.NumberFormat();
  let salary =  monthlySalary.replace(/,/g,'')
  console.log(converter.format(salary))

  this.setState({
    monthlySalary: converter.format(salary)
  })
}

handleOnChangeMonthlySalary(1000)```
0
Chinedu Ofor