JavaScript | Método padStart()

El método padStart() en JavaScript se usa para rellenar una string con otra string hasta que alcanza la longitud dada. El relleno se aplica desde el extremo izquierdo de la cuerda.

Sintaxis:

string.padStart(targetLength, padString)

Parámetros: este método acepta dos parámetros, como se mencionó anteriormente y se describe a continuación:

  • targetLength: es la longitud de la string final una vez que se ha rellenado la string original. Si el valor es menor que la longitud de la string original, se devuelve la string original.
  • padString: Es la string que se va a rellenar con la string original. Si este valor es demasiado largo para estar dentro de targetLength, se trunca desde el final. La string utilizada por defecto es el carácter de espacio (» «).

Valor devuelto: Devuelve la string final que se rellena con la string dada a la longitud dada.

Ejemplo 1: este ejemplo usa el método padStart() para rellenar strings en otra string.

<!DOCTYPE html>
<html>
  
<head>
    <title>
        JavaScript | padStart() method
    </title>
</head>
  
<body>
    <h1 style="color: green">
        GeeksforGeeks
    </h1>
  
    <b>JavaScript | padStart() method</b>
  
    <p>Output for "Hello123" with "$": 
        <span class="output"></span>
    </p>
  
    <p>Output for "Geeks" with "XX": 
        <span class="output_2"></span>
    </p>
      
    <button onclick="padStrings()">
        Pad Strings
    </button>
  
    <script type="text/javascript">
        function padStrings() {
            exString = "Hello123";
            exString2 = "Geeks";
  
            prepended_out = 
                exString.padStart(10, "$");
            prepended_out2 = 
                exString2.padStart(10, "XX");
          
            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:
    strings-before
  • Después de hacer clic en el botón:
    strings-after

Ejemplo 2: este ejemplo utiliza el método padStart() para insertar números en otro número.

<!DOCTYPE html>
<html>
  
<head>
    <title>
        JavaScript | padStart() method
    </title>
</head>
  
<body>
    <h1 style="color: green">
        GeeksforGeeks
    </h1>
  
    <b>JavaScript | padStart() method</b>
  
    <p>Output for "999" with "0": 
        <span class="output"></span>
    </p>
  
    <p>Output for "123" with "**": 
        <span class="output_2"></span>
    </p>
  
    <button onclick="padNumbers()">
        Pad Numbers
    </button>
  
    <script type="text/javascript">
        function padNumbers() {
            exNumber = 999;
            exNumber2 = 123;
  
            prepended_out
                = String(exNumber).padStart(5, "0");
              
            prepended_out2
                = String(exNumber2).padStart(5, "**");
  
            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:
    numbers-before
  • Después de hacer clic en el botón:
    numbers-after

Navegadores compatibles: los navegadores compatibles con el método padStart() se enumeran a continuación:

  • Google cromo 57
  • Firefox 48
  • Borde 15
  • safari10
  • Ópera 44

Publicación traducida automáticamente

Artículo escrito por sayantanm19 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *