Método 1: Usar el método padStart(): El método padStart() se puede usar para rellenar una string con los caracteres especificados hasta la longitud especificada. Toma dos parámetros, la longitud objetivo y la string con la que se reemplazará. La longitud de destino es la longitud de la string resultante después de que se haya rellenado la string actual. El segundo parámetro son los caracteres con los que se rellenaría la string.
Si se va a rellenar un número, primero se debe convertir en una string pasándola al constructor de strings. Luego se usa el método padStart() en esta string.
Sintaxis:
String(strToPad).padStart(padLength, padChar)
Ejemplo:
<!DOCTYPE html>
<html>
<head>
<title>
How to pad a string to get the determined
length using JavaScript ?
</title>
</head>
<body>
<h1 style="color: green">GeeksforGeeks</h1>
<b>
How to pad a string to get the determined
length using JavaScript ?
</b>
<p>
Padding the string 'abcdefg' to 10 characters:
<span class="output"></span>
</p>
<p>
Padding the string '1234' to 10 characters:
<span class="output-2"></span>
</p>
<button onclick="pad()">Pad string</button>
<script type="text/javascript">
function pad() {
example1 = "abcdefg";
example2 = 1234;
prepended_out = String(example1).padStart(10, '*');
prepended_out2 = String(example2).padStart(10, '^#');
document.querySelector('.output').textContent
= prepended_out;
document.querySelector('.output-2').textContent
= prepended_out2;
}
</script>
</body>
</html>
Producción:
- Antes de hacer clic en el botón:
- Después de hacer clic en el botón:
Método 2: función personalizada usando el método repeat() y slice(): la función debe crearse con tres argumentos, los caracteres con los que se rellenará, la longitud de la string final rellenada y la string que se rellenará.
El carácter con el que se va a rellenar y la string que se va a rellenar se convierten primero en una string. Esto se hace usando el constructor String() y pasándole ambos valores. Estos se almacenan en dos variables, padChar y originalString . El número real de caracteres que se van a rellenar se determina restando la longitud de la string necesaria con la longitud de los caracteres que se van a rellenar. Esto se almacena en una nueva variable, padLeft .
La string de relleno que se agrega delante de la string original se crea con el método repeat(). El método repeat() devuelve una nueva string que contiene el número especificado de copias de la string en la que se llamó. Acepta un parámetro que es el número de copias a realizar. Este método se llama en elpadChar string y el valor padLeft se pasa en este parámetro. Crea las copias necesarias para que la string se agregue delante de la string original. Esto se almacena en la variable padString .
Se crea una nueva string al concatenar padString y originalString . El método slice() se usa en esta nueva string para hacer que la longitud sea igual a la longitud requerida. Esto se hace pasando un valor negativo de padLength. A continuación, se devuelve la string final.
Ejemplo:
<!DOCTYPE html>
<html>
<head>
<title>
How to pad a string to get the determined
length using JavaScript ?
</title>
</head>
<body>
<h1 style="color: green">GeeksforGeeks</h1>
<b>
How to pad a string to get the determined
length using JavaScript ?
</b>
<p>
Padding the string 'abcdefg' to 10 characters:
<span class="output"></span>
</p>
<p>
Padding the string '1234' to 10 characters:
<span class="output-2"></span>
</p>
<button onclick="pad()">Pad string</button>
<script type="text/javascript">
function padStr(padChar, padLength, originalString) {
// Convert the pad character and original
// string to String
padChar = String(padChar);
originalString = String(originalString);
// Calculate the length of padding characters
padLeft = padLength - originalString.length;
// Create the pad string
padString = padChar.repeat(padLeft);
// Add the pad string to the original string
// slice it to the padLength if it exceeds
// the pad length specified
newString = (padString +
originalString).slice(-padLength);
return newString;
}
function pad() {
example1 = "abcdefg";
example2 = 1234;
prepended_out = padStr('*', 10, example1);
prepended_out2 = padStr('^#', 10, example2);
document.querySelector('.output').textContent
= prepended_out;
document.querySelector('.output-2').textContent
= prepended_out2;
}
</script>
</body>
</html>
Producción:
- Antes de hacer clic en el botón:
- Después de hacer clic en el botón:
Publicación traducida automáticamente
Artículo escrito por sayantanm19 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA