Agregar carácter a la cadena en JavaScript

Las cadenas de JavaScript son inmutables, así que no puedes cambiar un carácter de una cadena existente. Para agregar texto, combina la cadena original con el texto nuevo y usa la cadena resultante, ya sea en una variable nueva o asignándola de nuevo a la variable original. Usa + o un literal de plantilla para añadir texto de forma sencilla, concat() para unir cadenas o el corte de cadenas y un array para insertar texto en una posición concreta.

Añadir caracteres al principio o al final de una cadena

Coloca el texto nuevo antes de la cadena existente para añadirlo al principio, o después para añadirlo al final. Por ejemplo, "H" + "ello" produce "Hello", mientras que "Hello" + "!" produce "Hello!". El operador + se evalúa de izquierda a derecha, por lo que el orden de los operandos determina dónde aparece el texto.

Ejecuta este ejemplo:

El código y las etiquetas o salidas visibles de esta sección se mantienen en inglés.

const existingString = "ello";
const charToAdd = "H";
const newString = charToAdd + existingString;
console.log(newString);

Hello

Para añadir texto al final, invierte el orden de los operandos: existingString + charToAdd. Si quieres que la variable haga referencia al resultado, vuelve a asignárselo: existingString = existingString + charToAdd requiere que existingString se haya declarado con let, no con const.

Usar el operador + y los literales de plantilla

El operador + funciona bien para unir unos pocos valores. Los literales de plantilla ofrecen otra forma legible, especialmente cuando una cadena incluye varias variables o expresiones. Escribe el literal entre acentos graves y coloca cada valor dentro de ${}. Por ejemplo, `${firstName} ${lastName}` combina dos variables con un espacio entre ellas. Para añadir texto al principio o al final, coloca la expresión correspondiente en esa posición dentro del literal de plantilla.

Ambas opciones crean una cadena nueva; ninguna modifica las cadenas originales. Elige la que muestre con más claridad el orden deseado. Si necesitas un separador fijo entre varios valores, un literal de plantilla puede mostrar directamente ese separador en el resultado.

Usar concat() para unir cadenas

El método concat() devuelve una cadena nueva formada por la cadena sobre la que se llama, seguida de cada argumento proporcionado. La cadena receptora determina la primera parte del resultado: "Hello".concat("!") añade un signo de exclamación al final, mientras que "H".concat("ello") coloca texto al principio de "ello" porque "H" es la cadena receptora. El método no modifica ninguna de las dos cadenas. Consulta la referencia de JavaScript para concat() para conocer los detalles de la API; esa referencia está en inglés y no hay un destino localizado disponible.

Para añadir valores de un array, empieza con una cadena y agrega cada valor en orden. Por ejemplo, un bucle que aplica result = result.concat(character) para cada elemento de characters crea una única cadena como resultado. Inicializa result con el texto inicial antes del bucle. Si hay muchos fragmentos de texto, puede ser más claro acumularlos en un array y llamar a join("") una sola vez que crear cadenas repetidamente.

Insertar caracteres en una posición concreta

Para insertar texto en el índice position, une la parte anterior a ese índice, el texto insertado y la parte que comienza en ese índice. Con slice(), la expresión es original.slice(0, position) + inserted + original.slice(position). La primera llamada toma los caracteres hasta el índice, sin incluirlo; la segunda toma el resto. Los índices de las cadenas de JavaScript cuentan unidades de código UTF-16, por lo que quizá no coincidan con los caracteres que percibe una persona cuando se trata de emojis u otros textos Unicode.

También puedes expresar el mismo patrón con substring(): original.substring(0, position) + inserted + original.substring(position). Para índices no negativos dentro de la cadena, toma el fragmento entre sus dos argumentos; con un solo argumento, toma el resto de la cadena. slice() también admite índices negativos, mientras que substring() trata los argumentos negativos como cero e intercambia los argumentos si el primero es mayor que el segundo. Elige según el comportamiento de índices que necesite tu código.

Crear una cadena a partir de un array

Si resulta más fácil describir una inserción como una modificación de un array, divide la cadena en partes, usa splice() para insertar un elemento y luego vuelve a unir el array en una cadena. Por ejemplo, const parts = original.split("") crea un array de unidades de código UTF-16; parts.splice(position, 0, inserted) inserta un elemento sin eliminar ninguno y parts.join("") crea la cadena resultante. La posición es un índice de array que empieza en cero: 0 inserta antes del primer elemento y parts.length añade el texto después del último.

Este enfoque resulta útil si ya necesitas modificar una colección de caracteres o realizar varias operaciones de array. Para texto que puede contener caracteres fuera del plano multilingüe básico, Array.from(original) recorre puntos de código Unicode en lugar de unidades de código UTF-16. Ni split("") ni Array.from() agrupan las marcas combinantes en grafemas que una persona percibe como un solo carácter; usa un enfoque que tenga en cuenta los grafemas cuando la posición deba corresponder a lo que una persona ve como un carácter.