Comment remplir une valeur avec des zéros non significatifs?

Quelle est la méthode recommandée pour remplir une valeur en JavaScript? J'imagine que je pourrais créer une fonction personnalisée pour ajouter des zéros à une valeur transtypée, mais je me demande s'il existe un moyen plus direct de le faire?

Remarque: Par "zerofilled", je veux dire dans le sens de base de données du mot (où une représentation zerofilled à 6 chiffres du nombre 5 serait "000005").

Note aux lecteurs!

Comme l'ont souligné les commentateurs, cette solution est «intelligente», et comme les solutions intelligentes le sont souvent, elle est gourmande en mémoire et relativement lente. Si les performances vous préoccupent, n'utilisez pas cette solution!

Potentiellement obsolète : ECMAScript 2017 inclut String.prototype.padStart et Number.prototype.toLocaleString existe depuis ECMAScript 3.1. Exemple:

var n=-0.1;
n.toLocaleString('en', {minimumIntegerDigits:4,minimumFractionDigits:2,useGrouping:false})

... affichera "-0000.10".

// or 
const padded = (.1+"").padStart(6,"0");
`-${padded}`

... affichera "-0000.1".

Une fonction simple est tout ce dont vous avez besoin

function zeroFill( number, width )
{
  width -= number.toString().length;
  if ( width > 0 )
  {
    return new Array( width + (/\./.test( number ) ? 2 : 1) ).join( '0' ) + number;
  }
  return number + ""; // always return a string
}

vous pouvez faire cuire cela dans une bibliothèque si vous souhaitez conserver l'espace de noms ou autre. Comme avec l'extension de jQuery .

Manière simple. Vous pouvez ajouter une multiplication de chaînes pour le pad et le transformer en fonction.

var pad = "000000";
var n = '5';
var result = (pad+n).slice(-pad.length);

En tant que fonction,

function paddy(num, padlen, padchar) {
    var pad_char = typeof padchar !== 'undefined' ? padchar : '0';
    var pad = new Array(1 + padlen).join(pad_char);
    return (pad + num).slice(-pad.length);
}
var fu = paddy(14, 5); // 00014
var bar = paddy(2, 4, '#'); // ###2

Je ne peux pas croire toutes les réponses complexes ici ... Utilisez simplement ceci:

var zerofilled = ('0000'+n).slice(-4);

En fait, j'ai dû trouver quelque chose comme ça récemment. J'ai pensé qu'il devait y avoir un moyen de le faire sans utiliser de boucles.

C'est ce que j'ai trouvé.

function zeroPad(num, numZeros) {
    var n = Math.abs(num);
    var zeros = Math.max(0, numZeros - Math.floor(n).toString().length );
    var zeroString = Math.pow(10,zeros).toString().substr(1);
    if( num < 0 ) {
        zeroString = '-' + zeroString;
    }

    return zeroString+n;
}

Ensuite, utilisez-le simplement en fournissant un nombre à zéro:

> zeroPad(50,4);
"0050"

Si le nombre est supérieur au remplissage, le nombre s'étendra au-delà du remplissage:

> zeroPad(51234, 3);
"51234"

Les décimales sont bien aussi!

> zeroPad(51.1234, 4);
"0051.1234"

Si cela ne vous dérange pas de polluer l'espace de noms global, vous pouvez l'ajouter directement à Number:

Number.prototype.leftZeroPad = function(numZeros) {
    var n = Math.abs(this);
    var zeros = Math.max(0, numZeros - Math.floor(n).toString().length );
    var zeroString = Math.pow(10,zeros).toString().substr(1);
    if( this < 0 ) {
        zeroString = '-' + zeroString;
    }

    return zeroString+n;
}

Et si vous préférez que les décimales occupent de l'espace dans le rembourrage:

Number.prototype.leftZeroPad = function(numZeros) {
    var n = Math.abs(this);
    var zeros = Math.max(0, numZeros - n.toString().length );
    var zeroString = Math.pow(10,zeros).toString().substr(1);
    if( this < 0 ) {
        zeroString = '-' + zeroString;
    }

    return zeroString+n;
}

À votre santé!

XDR a proposé une variation logarithmique qui semble mieux fonctionner.

AVERTISSEMENT : cette fonction échoue si num est égal à zéro (par exemple zeropad (0, 2))

function zeroPad (num, numZeros) {
    var an = Math.abs (num);
    var digitCount = 1 + Math.floor (Math.log (an) / Math.LN10);
    if (digitCount >= numZeros) {
        return num;
    }
    var zeroString = Math.pow (10, numZeros - digitCount).toString ().substr (1);
    return num < 0 ? '-' + zeroString + an : zeroString + an;
}

En parlant de performance, tomsmeding a comparé les 3 premières réponses ( 4 avec la variation du journal ). Devinez lequel a largement surpassé les deux autres? :)

Voici ce que j'avais l'habitude de remplir jusqu'à 7 caractères.

("0000000" + number).slice(-7)

Cette approche suffira probablement à la plupart des gens.

Edit: Si vous voulez le rendre plus générique, vous pouvez le faire:

("0".repeat(padding) + number).slice(-padding)

Edit 2: Notez que depuis ES2017, vous pouvez utiliser String.prototype.padStart:

number.toString().padStart(padding, "0")

Les navigateurs modernes prennent désormais en charge padStart, vous pouvez simplement faire maintenant:

string.padStart(maxLength, "0");

Exemple:

string = "14";
maxLength = 5; // maxLength is the max string length, not max # of fills
res = string.padStart(maxLength, "0");
console.log(res); // prints "00014"

Malheureusement, il y a beaucoup de suggestions compliquées inutiles pour ce problème, impliquant généralement l'écriture de votre propre fonction pour faire des mathématiques ou une manipulation de chaînes ou appeler un utilitaire tiers. Cependant, il existe un moyen standard de le faire dans la bibliothèque JavaScript de base avec une seule ligne de code. Il peut être utile d'envelopper cette seule ligne de code dans une fonction pour éviter d'avoir à spécifier des paramètres que vous ne souhaitez jamais modifier, comme le nom ou le style local.

var amount = 5;

var text = amount.toLocaleString('en-US',
{
    style: 'decimal',
    minimumIntegerDigits: 3,
    useGrouping: false
});

Cela produira la valeur de "005" pour le texte. Vous pouvez également utiliser la fonction toLocaleString de Number pour ajouter des zéros à droite du séparateur décimal.

var amount = 5;

var text = amount.toLocaleString('en-US',
{
    style: 'decimal',
    minimumFractionDigits: 2,
    useGrouping: false
});

Cela produira la valeur de "5,00" pour le texte. Remplacez useGrouping par true pour utiliser des séparateurs de virgules pour des milliers.

Notez que l'utilisation toLocaleString()de localeset des optionsarguments est normalisée séparément dans ECMA-402 , pas dans ECMAScript. À ce jour, certains navigateurs n'implémentent que le support de base , c'est toLocaleString()-à- dire peuvent ignorer tous les arguments.

Exemple complet

Si le nombre de remplissage est connu à l'avance pour ne pas dépasser une certaine valeur, il existe une autre façon de le faire sans boucles:

var fillZeroes = "00000000000000000000";  // max number of zero fill ever asked for in global

function zeroFill(number, width) {
    // make sure it's a string
    var input = number + "";  
    var prefix = "";
    if (input.charAt(0) === '-') {
        prefix = "-";
        input = input.slice(1);
        --width;
    }
    var fillAmt = Math.max(width - input.length, 0);
    return prefix + fillZeroes.slice(0, fillAmt) + input;
}

Cas de test ici: http://jsfiddle.net/jfriend00/N87mZ/

La manière rapide et sale:

y = (new Array(count + 1 - x.toString().length)).join('0') + x;

Pour x = 5 et count = 6, vous aurez y = "000005"

Voici une fonction rapide que j'ai trouvée pour faire le travail. Si quelqu'un a une approche plus simple, n'hésitez pas à partager!

function zerofill(number, length) {
    // Setup
    var result = number.toString();
    var pad = length - result.length;

    while(pad > 0) {
        result = '0' + result;
        pad--;
    }

    return result;
}

Tard dans la fête ici, mais j'utilise souvent cette construction pour faire un remplissage ad hoc d'une certaine valeur n, connue pour être une décimale positive:

(offset + n + '').substr(1);

Où offsetest 10 ^^ chiffres.

Par exemple, remplissage à 5 chiffres, où n = 123:

(1e5 + 123 + '').substr(1); // => 00123

La version hexidécimale de ceci est légèrement plus détaillée:

(0x100000 + 0x123).toString(16).substr(1); // => 00123

Note 1: J'aime aussi la solution de @ profitehlolz, qui est la version chaîne de ceci, utilisant la fonctionnalité astucieuse d'index négatif de slice ().

Je ne sais vraiment pas pourquoi, mais personne ne l'a fait de la manière la plus évidente. Voici mon implémentation.

Une fonction:

/** Pad a number with 0 on the left */
function zeroPad(number, digits) {
    var num = number+"";
    while(num.length < digits){
        num='0'+num;
    }
    return num;
}

Prototype:

Number.prototype.zeroPad=function(digits){
    var num=this+"";
    while(num.length < digits){
        num='0'+num;
    }
    return(num);
};

Très simple, je ne vois pas comment cela peut être plus simple. Pour une raison quelconque, il me semble que plusieurs fois ici sur SO, les gens essaient juste d'éviter les boucles "pour" et "tandis que" à tout prix. L'utilisation de regex coûtera probablement beaucoup plus de cycles pour un remplissage aussi simple à 8 chiffres.

J'utilise ce snipet pour obtenir une représentation à 5 chiffres

(value+100000).toString().slice(-5) // "00123" with value=123

ECMAScript 2017: utilisez padStart ou padEnd

'abc'.padStart(10);         // "       abc"
'abc'.padStart(10, "foo");  // "foofoofabc"
'abc'.padStart(6,"123465"); // "123abc"

Plus d'informations:

• https://github.com/tc39/proposal-string-pad-start-end
• https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/padStart

Le pouvoir des mathématiques!

x = entier à remplir
y = nombre de zéros à remplir

function zeroPad(x, y)
{
   y = Math.max(y-1,0);
   var n = (x / Math.pow(10,y)).toFixed(y);
   return n.replace('.','');  
}

Je n'ai vu personne souligner le fait que lorsque vous utilisez String.prototype.substr () avec un nombre négatif, il compte à droite.

Une solution à une réponse à la question du PO, une représentation à 6 chiffres remplie de zéros du nombre 5, est:

console.log(("00000000" + 5).substr(-6));

En généralisant, nous obtiendrons:

function pad(num, len) { return ("00000000" + num).substr(-len) };

console.log(pad(5, 6));
console.log(pad(45, 6));
console.log(pad(345, 6));
console.log(pad(2345, 6));
console.log(pad(12345, 6));

Après un long, très long test de 15 fonctions / méthodes différentes trouvées dans les réponses à ces questions, je sais maintenant laquelle est la meilleure (la plus polyvalente et la plus rapide).

J'ai pris 15 fonctions / méthodes à partir des réponses à cette question et fait un script pour mesurer le temps nécessaire pour exécuter 100 pads. Chaque pavé remplirait le nombre 9de 2000zéros. Cela peut sembler excessif, et c'est le cas, mais cela vous donne une bonne idée de la mise à l'échelle des fonctions.

Le code que j'ai utilisé se trouve ici: https://gist.github.com/NextToNothing/6325915

N'hésitez pas à modifier et tester le code vous-même.

Afin d'obtenir la méthode la plus polyvalente, vous devez utiliser une boucle. En effet, avec un très grand nombre, d'autres sont susceptibles d'échouer, alors que cela réussira.

Alors, quelle boucle utiliser? Eh bien, ce serait une whileboucle. Une forboucle est toujours rapide, mais une whileboucle est juste un peu plus rapide (quelques ms) - et plus propre.

Des réponses comme celles de Wilco, Aleksandar Toplekou Vitim.usferont parfaitement l'affaire.

Personnellement, j'ai essayé une approche différente. J'ai essayé d'utiliser une fonction récursive pour remplir la chaîne / le nombre. Cela fonctionnait mieux que les méthodes joignant un tableau mais, toujours, ne fonctionnait pas aussi rapidement qu'une boucle for.

Ma fonction est:

function pad(str, max, padder) {
  padder = typeof padder === "undefined" ? "0" : padder;
  return str.toString().length < max ? pad(padder.toString() + str, max, padder) : str;
}

Vous pouvez utiliser ma fonction avec ou sans définir la variable de remplissage. Alors comme ça:

pad(1, 3); // Returns '001'
// - Or -
pad(1, 3, "x"); // Returns 'xx1'

Personnellement, après mes tests, j'utiliserais une méthode avec une boucle while, comme Aleksandar Toplekou Vitim.us. Cependant, je le modifierais légèrement pour que vous puissiez définir la chaîne de remplissage.

Donc, j'utiliserais ce code:

function padLeft(str, len, pad) {
    pad = typeof pad === "undefined" ? "0" : pad + "";
    str = str + "";
    while(str.length < len) {
        str = pad + str;
    }
    return str;
}

// Usage
padLeft(1, 3); // Returns '001'
// - Or -
padLeft(1, 3, "x"); // Returns 'xx1'

Vous pouvez également l'utiliser comme fonction prototype, en utilisant ce code:

Number.prototype.padLeft = function(len, pad) {
    pad = typeof pad === "undefined" ? "0" : pad + "";
    var str = this + "";
    while(str.length < len) {
        str = pad + str;
    }
    return str;
}

// Usage
var num = 1;

num.padLeft(3); // Returns '001'
// - Or -
num.padLeft(3, "x"); // Returns 'xx1'

Le premier paramètre est un nombre réel, le deuxième paramètre est un entier positif spécifiant le nombre minimum de chiffres à gauche de la virgule décimale et le troisième paramètre est un entier positif facultatif spécifiant le nombre si les chiffres se trouvent à droite de la virgule décimale.

function zPad(n, l, r){
    return(a=String(n).match(/(^-?)(\d*)\.?(\d*)/))?a[1]+(Array(l).join(0)+a[2]).slice(-Math.max(l,a[2].length))+('undefined'!==typeof r?(0<r?'.':'')+(a[3]+Array(r+1).join(0)).slice(0,r):a[3]?'.'+a[3]:''):0
}

donc

           zPad(6, 2) === '06'
          zPad(-6, 2) === '-06'
       zPad(600.2, 2) === '600.2'
        zPad(-600, 2) === '-600'
         zPad(6.2, 3) === '006.2'
        zPad(-6.2, 3) === '-006.2'
      zPad(6.2, 3, 0) === '006'
        zPad(6, 2, 3) === '06.000'
    zPad(600.2, 2, 3) === '600.200'
zPad(-600.1499, 2, 3) === '-600.149'

Ne réinventez pas la roue, utilisez la chaîne de soulignement :

jsFiddle

var numToPad = '5';

alert(_.str.pad(numToPad, 6, '0')); // yields: '000005'

Ceci est la solution ES6.

function pad(num, len) {
  return '0'.repeat(len - num.toString().length) + num;
}
alert(pad(1234,6));

Dans tous les navigateurs modernes, vous pouvez utiliser

numberStr.padStart(numberLength, "0");

function zeroFill(num, numLength) {
  var numberStr = num.toString();

  return numberStr.padStart(numLength, "0");
}

var numbers = [0, 1, 12, 123, 1234, 12345];

numbers.forEach(
  function(num) {
    var numString = num.toString();
    
    var paddedNum = zeroFill(numString, 5);

    console.log(paddedNum);
  }
);

Voici la référence MDN https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/padStart

Non pas que cette question nécessite plus de réponses, mais j'ai pensé que j'ajouterais la version lodash simple de cela.

_.padLeft(number, 6, '0')

La dernière façon de le faire est beaucoup plus simple:

var number = 2
number.toLocaleString(undefined, {minimumIntegerDigits:2})

output: "02"

Juste une autre solution, mais je pense qu'elle est plus lisible.

function zeroFill(text, size)
{
  while (text.length < size){
  	text = "0" + text;
  }
  
  return text;
}

Celui-ci est moins natif, mais peut-être le plus rapide ...

zeroPad = function (num, count) {
    var pad = (num + '').length - count;
    while(--pad > -1) {
        num = '0' + num;
    }
    return num;
};

Ma solution

Number.prototype.PadLeft = function (length, digit) {
    var str = '' + this;
    while (str.length < length) {
        str = (digit || '0') + str;
    }
    return str;
};

Usage

var a = 567.25;
a.PadLeft(10); // 0000567.25

var b = 567.25;
b.PadLeft(20, '2'); // 22222222222222567.25

Pourquoi ne pas utiliser la récursivité?

function padZero(s, n) {
    s = s.toString(); // in case someone passes a number
    return s.length >= n ? s : padZero('0' + s, n);
}

Certains monkeypatching fonctionnent également

String.prototype.padLeft = function (n, c) {
  if (isNaN(n))
    return null;
  c = c || "0";
  return (new Array(n).join(c).substring(0, this.length-n)) + this; 
};
var paddedValue = "123".padLeft(6); // returns "000123"
var otherPadded = "TEXT".padLeft(8, " "); // returns "    TEXT"

function pad(toPad, padChar, length){
    return (String(toPad).length < length)
        ? new Array(length - String(toPad).length + 1).join(padChar) + String(toPad)
        : toPad;
}

pad(5, 0, 6) = 000005

pad('10', 0, 2) = 10 // don't pad if not necessary

pad('S', 'O', 2) = SO

...etc.

À votre santé

La solution la plus simple et la plus simple que vous trouverez.

function zerofill(number,length) {
    var output = number.toString();
    while(output.length < length) {
      output = '0' + output;
    }
    return output;
}