javascript - padleft - ¿Cómo puedo rellenar un valor con ceros iniciales?

padleft javascript

Question

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

Nota: Por "zerofilled" lo digo en el sentido de la base de datos de la palabra (donde una representación zerofilled de 6 dígitos del número 5 sería "000005").

Answer 1

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 es una preocupación para usted, ¡no use esta solución!

Potencialmente desactualizado : ECMAScript 2017 incluye String.prototype.padStart y Number.prototype.toLocaleString está ahí 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 simple función 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
}

puedes hornear esto en una biblioteca si quieres conservar el espacio de nombres o lo que sea. Al igual que con jQuery extender .

Answer 2

¡El poder de las matemáticas!

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

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

Answer 3

¿Por qué no usar la recursión?

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

Answer 4

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

Answer 5

De hecho, tuve que idear algo como esto recientemente. Pensé 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 que se contamine el espacio de nombres global, puede agregarlo a Número directamente:

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

¡Aclamaciones!

XDR 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 jsperf.com/left-zero-pad ( 4 con la variación del registro ). ¿Adivinen cuál superó a los otros dos? :)

Answer 6

Desafortunadamente, existen muchas sugerencias innecesarias y complicadas para este problema, que generalmente implican escribir su propia función para realizar operaciones de manipulación de cuerdas o matemáticas o llamar a una utilidad de terceros. Sin embargo, hay una forma estándar de hacerlo en la biblioteca de JavaScript base con solo una línea de código. Podría valer la pena incluir esta línea de código en una función para evitar tener que especificar parámetros que nunca desea 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 los 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 de toLocaleString() con las locales y los argumentos de options se estandariza por separado en ECMA-402 , no en ECMAScript. A partir de hoy, algunos navegadores solo implementan soporte básico , es decir, toLocaleString() puede ignorar cualquier argumento.

Ejemplo completo

Answer 7

Después de un largo, largo tiempo de probar 15 diferentes funciones / métodos encontrados en estas preguntas, ahora sé cuál es el mejor (el más versátil y 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 9 con 2000 ceros. 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, tienes que usar un bucle. Esto se debe a que, con un número muy grande, es probable que otros fracasen, mientras que, esto tendrá éxito.

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

Respuestas como las de Wilco , Aleksandar Toplek o Vitim.us hará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 para unir una matriz pero, aún así, no funcionó tan rápido como un bucle for.

Mi función 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, configurar 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 bucle while, como Aleksandar Toplek o Vitim.us . Sin embargo, lo modificaría ligeramente para que pueda establecer la cadena de relleno.

Por lo tanto, yo 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 puedes usarlo como una función de 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''

Answer 8

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
• String.prototype.padStart

Answer 9

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 de dígitos 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
}

asi que

           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''

Answer 10

En el método .padStart() propuesto (etapa 3) de ES2017, .padStart() puede hacerlo (cuando se implementa / admite):

string.padStart(maxLength, "0"); //max length is the max string length, not max # of fills

Answer 11

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 String.prototype.padStart

Answer 12

Esta es la solución ES6.

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

Answer 13

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

Answer 14

Esto es lo que usé para 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 quieres hacerlo más genérico puedes hacer esto:

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

Answer 15

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

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

output: "02"

Answer 16

La forma rápida y sucia:

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

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

Answer 17

La solución más simple y directa que encontrará.

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

Answer 18

Manera simple. Podría agregar la multiplicación de cadenas 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

Answer 19

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

Answer 20

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

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

Answer 21

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

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

Answer 22

No reinvente la rueda, use la cadena de subrayado :

jsFiddle

var numToPad = ''5'';

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

Answer 23

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 de un solo tramo 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));

Answer 24

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 visto muchas veces aquí en SO, la gente simplemente intenta evitar los bucles ''for'' y ''while'' a cualquier costo. El uso de expresiones regulares probablemente costará más ciclos para un relleno tan trivial de 8 dígitos.

Answer 25

Si se sabe de antemano que el número de relleno no supera un determinado 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/

Answer 26

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

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

Answer 27

También funciona algo de crianza de monos.

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"

Answer 28

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

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

Donde el offset es de 10 ^^ dígitos.

Ej. Relleno de 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 de cadena de esta, utilizando la característica de índice negativo ingeniosa de slice ().

Answer 29

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

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

Answer 30

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.

Aclamaciones