¿Cómo insertar una string en un índice específico en JavaScript?

Dada una string que contiene palabras y la tarea es insertar una nueva string en un índice dado. Hay dos métodos para resolver este problema que se discuten a continuación:

Método 1: Usar el método slice(): Primero se divide la string en dos partes dividiéndola donde se debe insertar la nueva string. El método slice() se usa para devolver una array entre dos índices. Toma dos parámetros, uno es el índice inicial que especifica y el otro es el índice final.
La primera parte de la string se extrae utilizando la posición inicial como 0 y la posición final como el índice donde se debe insertar la nueva string. La segunda parte de la string se extrae utilizando la posición inicial como índice donde se debe insertar la nueva string. La posición final es opcional aquí y se asumirá hasta el final de la string. La nueva string se agrega entre estas dos partes mediante una simple concatenación de strings.

Ejemplo:

<!DOCTYPE html>
<html>
  
<head>
    <title>
        How to insert a string
        at a specific index?
    </title>
</head>
  
<body>
    <h1 style="color: green">
        GeeksforGeeks
    </h1>
      
    <b>
        How to insert a string
        at a specific index?
    </b>
      
    <p>The original string is: GeeksGeeks</p>
      
    <p>
        Click on the button to insert
        'For' at the 5th index position
    </p>
      
    <p>
        The new array is: 
        <span class="outputString"></span>
    </p>
  
    <button onclick="insertString()">
        Insert element
    </button>
      
    <script type="text/javascript">
          
        function insertString() {
            let origString = "GeeksGeeks";
            let stringToAdd = "For";
            let indexPosition = 5;
  
            newString = origString.slice(0, indexPosition)
                    + stringToAdd
                    + origString.slice(indexPosition);
  
            document.querySelector('.outputString').textContent
                    = newString;
        }
    </script>
</body>
  
</html>

Producción:

  • Antes de hacer clic en el botón:
    slice-before
  • Después de hacer clic en el botón:
    slice-after

Método 2: Usar el método splice(): El método split() se usa para dividir una string sobre la base de un separador. Este método se puede utilizar para dividir la string en letras individuales especificando un separador en blanco. Este paso se usa para convertir una string en una array, ya que el siguiente paso lo requiere.
El método splice() se usa para insertar o reemplazar el contenido de una array en un índice específico. Esto se puede usar para insertar la nueva string en la posición de la array. Toma 3 parámetros, el índice donde se insertará la string, el número de eliminaciones que se realizarán si las hay y la string que se insertará.
El índice requerido y la string se pasan como parámetros a este método con el parámetro de eliminación establecido en 0. Inserta la string en la array. La array se vuelve a unir utilizando el método join() . Esto lo convierte en una string completa nuevamente con la nueva string unida en el medio.

Ejemplo:

<!DOCTYPE html>
<html>
  
<head>
    <title>
        How to insert a string
        at a specific index?
    </title>
</head>
  
<body>
    <h1 style="color: green">
        GeeksforGeeks
    </h1>
      
    <b>
        How to insert a string
        at a specific index?
    </b>
      
    <p>
        The original string
        is: GeeksGeeks
    </p>
      
    <p>
        Click on the button to insert
        'For' at the 5th index position
    </p>
      
    <p>
        The new array is: 
        <span class="outputString"></span>
    </p>
  
    <button onclick="insertString()">
        Insert element
    </button>
      
    <script type="text/javascript">
  
        function insertString() {
            let origString = "GeeksGeeks";
            let stringToAdd = "For";
            let indexPosition = 5;
  
            // Split the string into individual
            // characters
            origString = origString.split('');
  
            // Insert the string at the index position
            origString.splice(indexPosition, 0, stringToAdd);
  
            // Join back the individual characters
            // to form a new string
            newString = origString.join('');
  
            document.querySelector('.outputString').textContent
                        = newString;
        }
    </script>
</body>
  
</html>

Producción:

  • Antes de hacer clic en el botón:
    splice-before
  • Después de hacer clic en el botón:
    splice-after

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 *