¿Cómo puedo rellenar un valor con ceros a la izquierda?

¿Cuál es la forma recomendada de rellenar un valor en JavaScript? Me imagino que podría construir una función personalizada para rellenar ceros en un valor de tipografía, pero me pregunto si hay una forma más directa de hacerlo.

Nota: Por "rellenado con ceros" quiero decir en el sentido de la base de datos de la palabra (donde una representación de rellenado con ceros de 6 dígitos del número 5 sería "000005").

¡Nota para los lectores!

Como los comentaristas han señalado, esta solución es "inteligente", y como suelen ser las soluciones inteligentes, requiere mucha memoria y es relativamente lenta. Si el rendimiento le preocupa, ¡no use esta solución!

Potencialmente desactualizado : ECMAScript 2017 incluye String.prototype.padStart y Number.prototype.toLocaleString está presente desde ECMAScript 3.1. Ejemplo:

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

... generará "-0000.10".

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

... generará "-0000.1".

Una función simple es todo lo que necesitas

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
}

podría incluir esto en una biblioteca si desea conservar el espacio de nombres o lo que sea. Al igual que con jQuery's extend .

Manera simple. Puede agregar multiplicación de cuerdas para el pad y convertirlo en una función.

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

Como una función,

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

No puedo creer todas las respuestas complejas aquí ... Solo usa esto:

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

De hecho, tuve que pensar en algo como esto recientemente. Supuse que tenía que haber una manera de hacerlo sin usar bucles.

Esto es lo que se me ocurrió.

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;
}

Luego, solo úselo proporcionando un número a cero pad:

> zeroPad(50,4);
"0050"

Si el número es mayor que el relleno, el número se expandirá más allá del relleno:

> zeroPad(51234, 3);
"51234"

¡Los decimales también están bien!

> zeroPad(51.1234, 4);
"0051.1234"

Si no le importa contaminar el espacio de nombres global, puede agregarlo directamente a 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;
}

Y si prefiere que los decimales ocupen espacio en el relleno:

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;
}

¡Salud!

A XDR se le ocurrió una variación logarítmica que parece funcionar mejor.

ADVERTENCIA : esta función falla si num es igual a cero (por ejemplo, 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;
}

Hablando de rendimiento, tomsmeding comparó las 3 respuestas principales ( 4 con la variación del registro ). Adivinar cuál mayormente superaron a los otros dos? :)

Esto es lo que solía rellenar un número de hasta 7 caracteres.

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

Este enfoque probablemente será suficiente para la mayoría de las personas.

Editar: si desea hacerlo más genérico, puede hacer esto:

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

Edición 2: Tenga en cuenta que desde ES2017 puede usar String.prototype.padStart:

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

Los navegadores modernos ahora son compatibles padStart, simplemente puede hacer ahora:

string.padStart(maxLength, "0");

Ejemplo:

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

Desafortunadamente, hay muchas sugerencias complicadas innecesarias para este problema, que generalmente implican escribir su propia función para hacer operaciones matemáticas o manipulación de cadenas o llamar a una utilidad de terceros. Sin embargo, hay una forma estándar de hacerlo en la biblioteca JavaScript base con solo una línea de código. Puede valer la pena incluir esta línea de código en una función para evitar tener que especificar parámetros que nunca desee cambiar, como el nombre o el estilo local.

var amount = 5;

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

Esto producirá el valor de "005" para el texto. También puede usar la función toLocaleString de Number para rellenar ceros al lado derecho del punto decimal.

var amount = 5;

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

Esto producirá el valor de "5.00" para el texto. Cambie useGrouping a true para usar separadores de coma para miles.

Tenga en cuenta que el uso toLocaleString()con localesy optionsargumentos está estandarizado por separado en ECMA-402 , no en ECMAScript. A partir de hoy, algunos navegadores solo implementan soporte básico , es decir, toLocaleString()pueden ignorar cualquier argumento.

Ejemplo completo

Si se sabe de antemano que el número de relleno no excede un cierto valor, hay otra forma de hacerlo sin bucles:

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;
}

Casos de prueba aquí: http://jsfiddle.net/jfriend00/N87mZ/

La manera rápida y sucia:

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

Para x = 5 y cuenta = 6 tendrás y = "000005"

Aquí hay una función rápida que se me ocurrió para hacer el trabajo. Si alguien tiene un enfoque más simple, ¡siéntase libre de compartir!

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

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

    return result;
}

Tarde para la fiesta aquí, pero a menudo uso esta construcción para hacer un relleno ad-hoc de algún valor n, que se sabe que es un decimal positivo:

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

Donde offsettiene 10 ^^ dígitos.

Por ejemplo, Relleno a 5 dígitos, donde n = 123:

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

La versión hexadecimal de esto es un poco más detallada:

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

Nota 1: También me gusta la solución de @ profitehlolz, que es la versión en cadena de esta, usando la ingeniosa característica de índice negativo de slice ().

Realmente no sé por qué, pero nadie lo hizo de la manera más obvia. Aquí está mi implementación.

Función:

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

Prototipo:

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

Muy sencillo, no puedo ver de ninguna manera cómo esto puede ser más simple. Por alguna razón, he parecido muchas veces aquí en SO, la gente simplemente trata de evitar los bucles 'for' y 'while' a cualquier costo. El uso de expresiones regulares probablemente costará muchos más ciclos para un relleno tan trivial de 8 dígitos.

Yo uso este fragmento para obtener una representación de 5 dígitos

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

ECMAScript 2017: use padStart o padEnd

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

Más información:

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

El poder de las matemáticas!

x = entero para rellenar
y = número de ceros para rellenar

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

No vi a nadie señalar el hecho de que cuando usas String.prototype.substr () con un número negativo, cuenta desde la derecha.

Una solución única a la pregunta del OP, una representación de 6 dígitos rellenada con cero del número 5, es:

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

Generalizando obtendremos:

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));

Después de mucho, mucho tiempo de probar 15 funciones / métodos diferentes que se encuentran en las respuestas a estas preguntas, ahora sé cuál es el mejor (el más versátil y el más rápido).

Tomé 15 funciones / métodos de las respuestas a esta pregunta e hice un script para medir el tiempo necesario para ejecutar 100 pads. Cada pad rellenaría el número 9con 2000ceros. Esto puede parecer excesivo, y lo es, pero le da una buena idea sobre la escala de las funciones.

El código que utilicé se puede encontrar aquí: https://gist.github.com/NextToNothing/6325915

Siéntase libre de modificar y probar el código usted mismo.

Para obtener el método más versátil, debe usar un bucle. Esto se debe a que con números muy grandes es probable que otros fallen, mientras que esto tendrá éxito.

Entonces, ¿qué bucle usar? Bueno, eso sería un whilebucle. Un forbucle sigue siendo rápido, pero un whilebucle es solo un poco más rápido (un par de ms) y más limpio.

Respuestas como esas por Wilco, Aleksandar Topleko Vitim.usharán el trabajo perfectamente.

Personalmente, probé un enfoque diferente. Intenté usar una función recursiva para rellenar la cadena / número. Funcionó mejor que los métodos que se unen a una matriz pero, aún así, no funcionó tan rápido como un bucle for.

Mi funcion es:

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

Puede usar mi función con o sin establecer la variable de relleno. Así como esto:

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

Personalmente, después de mis pruebas, usaría un método con un ciclo while, como Aleksandar Topleko Vitim.us. Sin embargo, lo modificaría ligeramente para que pueda establecer la cadena de relleno.

Entonces, usaría este código:

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'

También puede usarlo como una función prototipo, usando este código:

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'

El primer parámetro es cualquier número real, el segundo parámetro es un número entero positivo que especifica el número mínimo de dígitos a la izquierda del punto decimal y el tercer parámetro es un número entero positivo opcional que especifica el número si los dígitos están a la derecha del punto decimal.

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
}

entonces

           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'

No reinvente la rueda, use una cadena de subrayado :

jsFiddle

var numToPad = '5';

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

Esta es la solución ES6.

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

En todos los navegadores modernos puedes usar

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);
  }
);

Aquí está la referencia de MDN https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/padStart

No es que esta pregunta necesite más respuestas, pero pensé que agregaría la versión simple de esto.

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

La última forma de hacer esto es mucho más simple:

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

output: "02"

Solo otra solución, pero creo que es más legible.

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

Este es menos nativo, pero puede ser el más rápido ...

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

Mi solución

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

Uso

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

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

¿Por qué no usar la recursividad?

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

Algunos parches de mono también funcionan

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.

Salud

El más simple , la solución más directo que encontrará.

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