Necesito una función de JavaScript que pueda tomar un valor y rellenarlo a una longitud determinada (necesito espacios, pero cualquier cosa funcionaría). Encontré esto:

Código:

String.prototype.pad = function(l, s, t){
    return s || (s = " "), (l -= this.length) > 0 ? (s = new Array(Math.ceil(l / s.length)
        + 1).join(s)).substr(0, t = !t ? l : t == 1 ? 0 : Math.ceil(l / 2))
        + this + s.substr(0, l - t) : this;
};

Ejemplo:

<script type="text/javascript">
//<![CDATA[

var s = "Jonas";
document.write(
    '<h2>S = '.bold(), s, "</h2>",
    'S.pad(20, "[]", 0) = '.bold(), s.pad(20, "[]", 0), "<br />",
    'S.pad(20, "[====]", 1) = '.bold(), s.pad(20, "[====]", 1), "<br />",
    'S.pad(20, "~", 2) = '.bold(), s.pad(20, "~", 2)
);

//]]>
</script>

Pero no tengo idea de qué diablos está haciendo y no parece funcionar para mí.

Encontré esta solución aquí y esto es mucho más simple para mí:

var n = 123

String("00000" + n).slice(-5); // returns 00123
("00000" + n).slice(-5); // returns 00123
("     " + n).slice(-5); // returns "  123" (with two spaces)

Y aquí hice una extensión para el objeto de cadena:

String.prototype.paddingLeft = function (paddingValue) {
   return String(paddingValue + this).slice(-paddingValue.length);
};

Un ejemplo para usarlo:

function getFormattedTime(date) {
  var hours = date.getHours();
  var minutes = date.getMinutes();

  hours = hours.toString().paddingLeft("00");
  minutes = minutes.toString().paddingLeft("00");

  return "{0}:{1}".format(hours, minutes);
};

String.prototype.format = function () {
    var args = arguments;
    return this.replace(/{(\d+)}/g, function (match, number) {
        return typeof args[number] != 'undefined' ? args[number] : match;
    });
};

Esto devolverá una hora en el formato "15:30"

Un metodo mas rapido

Si está haciendo esto repetidamente, por ejemplo, para rellenar valores en una matriz, y el rendimiento es un factor, el siguiente enfoque puede brindarle una ventaja de casi 100 veces en velocidad ( jsPerf ) sobre otra solución que se discute actualmente en Internet. La idea básica es que está proporcionando a la función de relleno una cadena vacía completamente rellenada para usar como búfer. La función de almohadilla simplemente agrega una cadena para agregarla a esta cadena precompletada (una cadena concat) y luego corta o recorta el resultado a la longitud deseada.

function pad(pad, str, padLeft) {
  if (typeof str === 'undefined') 
    return pad;
  if (padLeft) {
    return (pad + str).slice(-pad.length);
  } else {
    return (str + pad).substring(0, pad.length);
  }
}

Por ejemplo, para poner a cero un número con una longitud de 10 dígitos,

pad('0000000000',123,true);

Para rellenar una cadena con espacios en blanco, de modo que la cadena completa tenga 255 caracteres,

var padding = Array(256).join(' '), // make a string of 255 spaces
pad(padding,123,true);

Prueba de rendimiento

Vea la prueba jsPerf aquí .

Y esto es más rápido que ES6 string.repeaten 2x también, como lo muestra el JsPerf revisado aquí

http://www.webtoolkit.info/javascript_pad.html

/**
*
*  Javascript string pad
*  http://www.webtoolkit.info/
*
**/

var STR_PAD_LEFT = 1;
var STR_PAD_RIGHT = 2;
var STR_PAD_BOTH = 3;

function pad(str, len, pad, dir) {

    if (typeof(len) == "undefined") { var len = 0; }
    if (typeof(pad) == "undefined") { var pad = ' '; }
    if (typeof(dir) == "undefined") { var dir = STR_PAD_RIGHT; }

    if (len + 1 >= str.length) {

        switch (dir){

            case STR_PAD_LEFT:
                str = Array(len + 1 - str.length).join(pad) + str;
            break;

            case STR_PAD_BOTH:
                var padlen = len - str.length;
                var right = Math.ceil( padlen / 2 );
                var left = padlen - right;
                str = Array(left+1).join(pad) + str + Array(right+1).join(pad);
            break;

            default:
                str = str + Array(len + 1 - str.length).join(pad);
            break;

        } // switch

    }

    return str;

}

Es mucho más legible.

Aquí hay un enfoque recursivo.

function pad(width, string, padding) { 
  return (width <= string.length) ? string : pad(width, padding + string, padding)
}

Un ejemplo...

pad(5, 'hi', '0')
=> "000hi"

String.prototype.padStart()y String.prototype.padEnd()actualmente son propuestas de candidatos TC39: consulte github.com/tc39/proposal-string-pad-start-end (solo disponible en Firefox a partir de abril de 2016; hay un polyfill disponible).

ECMAScript 2017 agrega un método padStart al prototipo String. Este método rellenará una cadena con espacios a una longitud determinada. Este método también toma una cadena opcional que se usará en lugar de espacios para el relleno.

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

También se agregó un método padEnd que funciona de la misma manera.

Para la compatibilidad del navegador (y un útil polyfill) vea este enlace .

Usando el método ECMAScript 6 String # repeat , una función de pad es tan simple como:

String.prototype.padLeft = function(char, length) { 
    return char.repeat(Math.max(0, length - this.length)) + this;
}

String#repeatactualmente solo es compatible con Firefox y Chrome. para otra implementación, uno podría considerar el siguiente polyfill simple:

String.prototype.repeat = String.prototype.repeat || function(n){ 
    return n<=1 ? this : (this + this.repeat(n-1)); 
}

Usando el método ECMAScript 6 String # repeat y las funciones de flecha , una función de pad es tan simple como:

var leftPad = (s, c, n) => c.repeat(n - s.length) + s;
leftPad("foo", "0", 5); //returns "00foo"

jsfiddle

editar: sugerencia de los comentarios:

const leftPad = (s, c, n) => n - s.length > 0 ? c.repeat(n - s.length) + s : s;

de esta manera, no arrojará un error cuando s.lengthsea ​​mayor quen

edit2: sugerencia de los comentarios:

const leftPad = (s, c, n) =>{ s = s.toString(); c = c.toString(); return s.length > n ? s : c.repeat(n - s.length) + s; }

de esta manera, puede usar la función para cadenas y no cadenas por igual.

El truco clave en ambas soluciones es crear una arrayinstancia con un tamaño determinado (uno más que la longitud deseada), y luego llamar inmediatamente al join()método para hacer un string. El join()método se pasa el relleno string(espacios probablemente). Como arrayestá vacío, las celdas vacías se procesarán como vacías stringsdurante el proceso de unir el arrayresultado en un solo resultado string, y solo quedará el relleno. Es una muy buena técnica.

pad con valores predeterminados

Me di cuenta de que principalmente necesito el padLeft para la conversión de tiempo / relleno de números

así que escribí esta función

function padL(a,b,c){//string/number,length=2,char=0
 return (new Array(b||2).join(c||0)+a).slice(-b)
}

Esta función simple admite Número o Cadena como entrada

el pad predeterminado es de 2 caracteres

char predeterminado es 0

así que simplemente puedo escribir

padL(1);
// 01

si agrego el segundo argumento (ancho del pad)

padL(1,3);
// 001

tercer parámetro (pad char)

padL('zzz',10,'x');
// xxxxxxxzzz

EDITAR @BananaAcid Si pasa un valor indefinido o una cadena de longitud 0 se obtiene 0undefined.so:

como se sugiere

function padL(a,b,c){//string/number,length=2,char=0
 return (new Array((b||1)+1).join(c||0)+(a||'')).slice(-(b||2))
}

pero esto también se puede lograr de una manera más corta.

function padL(a,b,c){//string/number,length=2,char=0
 return (new Array(b||2).join(c||0)+(a||c||0)).slice(-b)
}

trabaja también con:

padL(0)
padL(NaN)
padL('')
padL(undefined)
padL(false)

Y si desea poder rellenar de ambas maneras:

function pad(a,b,c,d){//string/number,length=2,char=0,0/false=Left-1/true=Right
return a=(a||c||0),c=new Array(b||2).join(c||0),d?(a+c).slice(0,b):(c+a).slice(-b)
}

que se puede escribir de forma más corta sin usar el corte.

function pad(a,b,c,d){
 return a=(a||c||0)+'',b=new Array((++b||3)-a.length).join(c||0),d?a+b:b+a
}
/*

Usage:

pad(
 input // (int or string) or undefined,NaN,false,empty string
       // default:0 or PadCharacter
 // optional
 ,PadLength // (int) default:2
 ,PadCharacter // (string or int) default:'0'
 ,PadDirection // (bolean) default:0 (padLeft) - (true or 1) is padRight 
)

*/

ahora si intentas rellenar 'averylongword' con 2 ... ese no es mi problema.

Dije que te doy una propina.

La mayoría de las veces si rellena lo hace por el mismo valor N veces.

¡El uso de cualquier tipo de función dentro de un ciclo ralentiza el ciclo!

Entonces, si solo desea dejar algunos números dentro de una larga lista, no use funciones para hacer esta cosa simple.

usa algo como esto:

var arrayOfNumbers=[1,2,3,4,5,6,7],
    paddedArray=[],
    len=arrayOfNumbers.length;
while(len--){
 paddedArray[len]=('0000'+arrayOfNumbers[len]).slice(-4);
}

si no sabe cómo el tamaño máximo de relleno se basa en los números dentro de la matriz.

var arrayOfNumbers=[1,2,3,4,5,6,7,49095],
    paddedArray=[],
    len=arrayOfNumbers.length;

// search the highest number
var arrayMax=Function.prototype.apply.bind(Math.max,null),
// get that string length
padSize=(arrayMax(arrayOfNumbers)+'').length,
// create a Padding string
padStr=new Array(padSize).join(0);
// and after you have all this static values cached start the loop.
while(len--){
 paddedArray[len]=(padStr+arrayOfNumbers[len]).slice(-padSize);//substr(-padSize)
}
console.log(paddedArray);

/*
0: "00001"
1: "00002"
2: "00003"
3: "00004"
4: "00005"
5: "00006"
6: "00007"
7: "49095"
*/

Con ES8, hay dos opciones para el relleno.

Puedes consultarlos en la documentación.

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/padEnd

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/padStart

Tomando las ideas de Samuel, aquí arriba. Y recuerda un antiguo script SQL, probé con esto:

a=1234;
'0000'.slice(a.toString().length)+a;

Funciona en todos los casos que pude imaginar:

a=     1 result  0001
a=    12 result  0012
a=   123 result  0123
a=  1234 result  1234
a= 12345 result 12345
a=  '12' result  0012

La cadena de relleno se ha implementado en la nueva versión de JavaScript.

str.padStart(targetLength [, padString])

https://developer.mozilla.org/es/docs/Web/JavaScript/Referencia/Objetos_globales/String/padStart

Si desea su propia función, consulte este ejemplo:

const myString = 'Welcome to my house';
String.prototype.padLeft = function(times = 0, str = ' ') {
    return (Array(times).join(str) + this);
}
console.log(myString.padLeft(12, ':'));
//:::::::::::Welcome to my house

Aquí hay una función simple que uso.

var pad=function(num,field){
    var n = '' + num;
    var w = n.length;
    var l = field.length;
    var pad = w < l ? l-w : 0;
    return field.substr(0,pad) + n;
};

Por ejemplo:

pad    (20,'     ');    //   20
pad   (321,'     ');    //  321
pad (12345,'     ');    //12345
pad (   15,'00000');    //00015
pad (  999,'*****');    //**999
pad ('cat','_____');    //__cat  

Un camino corto:

(x=>(new Array(int-x.length+1)).join(char)+x)(String)

Ejemplo:

(x=>(new Array(6-x.length+1)).join("0")+x)("1234")

volver: "001234"

es7 es solo borradores y propuestas en este momento, pero si desea realizar un seguimiento de la compatibilidad con la especificación, sus funciones de pad necesitan:

1. Soporte de almohadilla de caracteres múltiples.
2. No truncar la cadena de entrada
3. El valor predeterminado de la almohadilla es el espacio

Desde mi biblioteca de polyfill, pero aplique su propia diligencia debida para las extensiones de prototipo.

// Tests
'hello'.lpad(4) === 'hello'
'hello'.rpad(4) === 'hello'
'hello'.lpad(10) === '     hello'
'hello'.rpad(10) === 'hello     '
'hello'.lpad(10, '1234') === '41234hello'
'hello'.rpad(10, '1234') === 'hello12341'

String.prototype.lpad || (String.prototype.lpad = function( length, pad )
{
    if( length < this.length ) return this;

    pad = pad || ' ';
    let str = this;

    while( str.length < length )
    {
        str = pad + str;
    }

    return str.substr( -length );
});

String.prototype.rpad || (String.prototype.rpad = function( length, pad )
{
    if( length < this.length ) return this;

    pad = pad || ' ';
    let str = this;

    while( str.length < length )
    {
        str += pad;
    }

    return str.substr( 0, length );
});

Aquí hay una respuesta simple en básicamente una línea de código.

var value = 35 // the numerical value
var x = 5 // the minimum length of the string

var padded = ("00000" + value).substr(-x);

Asegúrese de que el número de caracteres en su relleno, ceros aquí, sea al menos igual a la longitud mínima deseada. Entonces, realmente, para ponerlo en una línea, para obtener un resultado de "00035" en este caso es:

var padded = ("00000" + 35).substr(-5);

Las manipulaciones de matriz son realmente lentas en comparación con el simple concat de cadena. Por supuesto, punto de referencia para su caso de uso.

function(string, length, pad_char, append) {
    string = string.toString();
    length = parseInt(length) || 1;
    pad_char = pad_char || ' ';

    while (string.length < length) {
        string = append ? string+pad_char : pad_char+string;
    }
    return string;
};

Una variante de la respuesta de @Daniel LaFavers .

var mask = function (background, foreground) {
  bg = (new String(background));
  fg = (new String(foreground));
  bgl = bg.length;
  fgl = fg.length;
  bgs = bg.substring(0, Math.max(0, bgl - fgl));
  fgs = fg.substring(Math.max(0, fgl - bgl));
  return bgs + fgs;
};

Por ejemplo:

mask('00000', 11  );   // '00011'
mask('00011','00' );   // '00000'
mask( 2     , 3   );   // '3'
mask('0'    ,'111');   // '1'
mask('fork' ,'***');   // 'f***'
mask('_____','dog');   // '__dog'

Es 2014, y sugiero una función de relleno de cadenas Javascript. ¡Decir ah!

Desnudos: almohadilla derecha con espacios

function pad ( str, length ) {
    var padding = ( new Array( Math.max( length - str.length + 1, 0 ) ) ).join( " " );
    return str + padding;
}

Fantasía: almohadilla con opciones

/**
 * @param {*}       str                         input string, or any other type (will be converted to string)
 * @param {number}  length                      desired length to pad the string to
 * @param {Object}  [opts]
 * @param {string}  [opts.padWith=" "]          char to use for padding
 * @param {boolean} [opts.padLeft=false]        whether to pad on the left
 * @param {boolean} [opts.collapseEmpty=false]  whether to return an empty string if the input was empty
 * @returns {string}
 */
function pad ( str, length, opts ) {
    var padding = ( new Array( Math.max( length - ( str + "" ).length + 1, 0 ) ) ).join( opts && opts.padWith || " " ),
        collapse = opts && opts.collapseEmpty && !( str + "" ).length;
    return collapse ? "" : opts && opts.padLeft ? padding + str : str + padding;
}

Uso (elegante):

pad( "123", 5 );
// returns "123  "

pad( 123, 5 );
// returns "123  " - non-string input

pad( "123", 5, { padWith: "0", padLeft: true } );
// returns "00123"

pad( "", 5 );
// returns "     "

pad( "", 5, { collapseEmpty: true } );
// returns ""

pad( "1234567", 5 );
// returns "1234567"

Si no le importa incluir una biblioteca de utilidades, la biblioteca lodash tiene las funciones _.pad, _.padLeft y _.padRight .

Creo que es mejor evitar la recurrencia porque es costoso.

function padLeft(str,size,padwith) {
	if(size <= str.length) {
        // not padding is required.
		return str;
	} else {
        // 1- take array of size equal to number of padding char + 1. suppose if string is 55 and we want 00055 it means we have 3 padding char so array size should be 3 + 1 (+1 will explain below)
        // 2- now join this array with provided padding char (padwith) or default one ('0'). so it will produce '000'
        // 3- now append '000' with orginal string (str = 55), will produce 00055

        // why +1 in size of array? 
        // it is a trick, that we are joining an array of empty element with '0' (in our case)
        // if we want to join items with '0' then we should have at least 2 items in the array to get joined (array with single item doesn't need to get joined).
        // <item>0<item>0<item>0<item> to get 3 zero we need 4 (3+1) items in array   
		return Array(size-str.length+1).join(padwith||'0')+str
	}
}

alert(padLeft("59",5) + "\n" +
     padLeft("659",5) + "\n" +
     padLeft("5919",5) + "\n" +
     padLeft("59879",5) + "\n" +
     padLeft("5437899",5));

Aquí hay una función de JavaScript que agrega un número específico de rellenos con un symble personalizado. La función toma tres parámetros.

    padMe -> cadena o número al pad izquierdo
    almohadillas -> número de almohadillas
    padSymble -> symble personalizado, el valor predeterminado es "0" 

    function leftPad(padMe, pads, padSymble) {
         if( typeof padMe === "undefined") {
             padMe = "";
         }
         if (typeof pads === "undefined") {
             pads = 0;
         }
         if (typeof padSymble === "undefined") {
             padSymble = "0";
         }

         var symble = "";
         var result = [];
         for(var i=0; i < pads ; i++) {
            symble += padSymble;
         }
        var length = symble.length - padMe.toString().length;
        result = symble.substring(0, length);
        return result.concat(padMe.toString());
    }

/ * Aquí hay algunos resultados:

> leftPad (1)
"1"
> leftPad (1, 4)
"0001"
> leftPad (1, 4, "0")
"0001"
> leftPad (1, 4, "@")
"@@@ 1"

* /

/**************************************************************************************************
Pad a string to pad_length fillig it with pad_char.
By default the function performs a left pad, unless pad_right is set to true.

If the value of pad_length is negative, less than, or equal to the length of the input string, no padding takes place.
**************************************************************************************************/
if(!String.prototype.pad)
String.prototype.pad = function(pad_char, pad_length, pad_right) 
{
   var result = this;
   if( (typeof pad_char === 'string') && (pad_char.length === 1) && (pad_length > this.length) )
   {
      var padding = new Array(pad_length - this.length + 1).join(pad_char); //thanks to http://stackoverflow.com/questions/202605/repeat-string-javascript/2433358#2433358
      result = (pad_right ? result + padding : padding + result);
   }
   return result;
}

Y luego puedes hacer:

alert( "3".pad("0", 3) ); //shows "003"
alert( "hi".pad(" ", 3) ); //shows " hi"
alert( "hi".pad(" ", 3, true) ); //shows "hi "

Si solo desea rellenar con una sola línea hacky muy simple, simplemente haga una cadena del carácter de relleno deseado de la longitud máxima de relleno deseada y luego suéltelo a la longitud de lo que desea rellenar.

Ejemplo: rellenar el almacén de cadenas econ espacios de hasta 25 caracteres.

var e = "hello"; e = e + "                         ".substring(e.length)

Resultado: "hello "

Si desea hacer lo mismo con un número como entrada, simplemente llame .toString()antes.

otra toma con la combinación de un par de soluciones

/**
 * pad string on left
 * @param {number} number of digits to pad, default is 2
 * @param {string} string to use for padding, default is '0' *
 * @returns {string} padded string
 */
String.prototype.paddingLeft = function (b,c) {
    if (this.length > (b||2))
        return this+'';
  return (this||c||0)+'',b=new Array((++b||3)-this.length).join(c||0),b+this
};

/**
 * pad string on right
 * @param {number} number of digits to pad, default is 2
 * @param {string} string to use for padding, default is '0' *
 * @returns {string} padded string
 */
String.prototype.paddingRight = function (b,c) {
  if (this.length > (b||2))
        return this+'';
  return (this||c||0)+'',b=new Array((++b||3)-this.length).join(c||0),this+b
};    

Un amigo preguntó sobre el uso de una función de JavaScript para rellenar a la izquierda. Se convirtió en un pequeño esfuerzo entre algunos de nosotros en el chat para codificarlo. Este fue el resultado:

function l(p,t,v){
    v+="";return v.length>=t?v:l(p,t,p+v); 
}

Asegura que el valor a rellenar es una cadena, y luego, si no es la longitud de la longitud total deseada, la rellenará una vez y luego se repetirá. Así es como se ve con un nombre y estructura más lógicos

function padLeft(pad, totalLength, value){
    value = value.toString();

    if( value.length >= totalLength ){
        return value;
    }else{
        return padLeft(pad, totalLength, pad + value);
    }
}

El ejemplo que estábamos usando era asegurarnos de que los números se rellenaran 0a la izquierda para hacer una longitud máxima de 6. Aquí hay un conjunto de ejemplos:

function l(p,t,v){v+="";return v.length>=t?v:l(p,t,p+v);}

var vals = [6451,123,466750];

var pad = l(0,6,vals[0]);// pad with 0's, max length 6

var pads = vals.map(function(i){ return l(0,6,i) });

document.write(pads.join("<br />"));

Un poco tarde, pero pensé que podría compartir de todos modos. Me pareció útil agregar una extensión prototipo a Object. De esa manera puedo rellenar números y cadenas, izquierda o derecha. Tengo un módulo con utilidades similares que incluyo en mis scripts.

// include the module in your script, there is no need to export
var jsAddOns = require('<path to module>/jsAddOns');

~~~~~~~~~~~~ jsAddOns.js ~~~~~~~~~~~~

/* 
 * method prototype for any Object to pad it's toString()
 * representation with additional characters to the specified length
 *
 * @param padToLength required int
 *     entire length of padded string (original + padding)
 * @param padChar optional char
 *     character to use for padding, default is white space
 * @param padLeft optional boolean
 *     if true padding added to left
 *     if omitted or false, padding added to right
 *
 * @return padded string or
 *     original string if length is >= padToLength
 */
Object.prototype.pad = function(padToLength, padChar, padLeft) {    

    // get the string value
    s = this.toString()

    // default padToLength to 0
    // if omitted, original string is returned
    padToLength = padToLength || 0;

    // default padChar to empty space
    padChar = padChar || ' ';


    // ignore padding if string too long
    if (s.length >= padToLength) {
        return s;
    }

    // create the pad of appropriate length
    var pad = Array(padToLength - s.length).join(padChar);

    // add pad to right or left side
    if (padLeft) {
        return pad  + s;        
    } else {
        return s + pad;
    }
};

1. Nunca inserte datos en algún lugar (especialmente no al principio, como str = pad + str;), ya que los datos se reasignarán cada vez. Añadir siempre al final!
2. No rellenes tu cuerda en el bucle. Déjalo en paz y construye primero la cuerda de tu pad Al final concatena con tu cadena principal.
3. No asigne cadenas de relleno cada vez (como str += pad;). Es mucho más rápido agregar la cadena de relleno a sí mismo y extraer los primeros x-chars (el analizador puede hacer esto de manera eficiente si extrae del primer carácter). Este es un crecimiento exponencial, lo que significa que desperdicia algo de memoria temporalmente (no debe hacerlo con textos extremadamente grandes).

if (!String.prototype.lpad) {
    String.prototype.lpad = function(pad, len) {
        while (pad.length < len) {
            pad += pad;
        }
        return pad.substr(0, len-this.length) + this;
    }
}

if (!String.prototype.rpad) {
    String.prototype.rpad = function(pad, len) {
        while (pad.length < len) {
            pad += pad;
        }
        return this + pad.substr(0, len-this.length);
    }
}

Aquí está mi opinión

No estoy tan seguro de su rendimiento, pero me parece mucho más legible que otras opciones que vi por aquí ...

var replicate = function(len, char) {
  return Array(len+1).join(char || ' ');
};

var padr = function(text, len, char) {
  if (text.length >= len) return text;
  return text + replicate(len-text.length, char);
};