Cómo concatenar cadenas en JavaScript

En este tutorial vamos a explicar cómo concatenar cadenas en JavaScript. La concatenación es el proceso mediante el cual unimos dos o más cadenas, dando lugar a una nueva cadena.

Para concatenar dos o más cadenas podemos usar el operador + de concatenación. Es también el símbolo que usamos para sumar números, aunque aplicado a las cadenas las unirá.

En el siguiente ejemplo unimos dos cadenas:

const resultado = "Ayer comí" + "higos";

El resultado de la concatenación de las dos cadenas anteriores será el siguiente:

"Ayer comíhigos"

Tal y como ves, la concatenación no agregará espacios en blanco, por lo que debemos agregarlos para que las oraciones tengan sentido:

const resultado = "Ayer comí " + "higos";

Al combinar dos o más cadenas se creará una nueva cadena que podrás usar, asignar o almacenar. Podemos asignar las cadenas a constantes o a variables y luego concatenarlas con otras cadenas:

const pelicula = "Alien";
const director = "Ridley Scott";

const favorita = 'Mi película preferida es ' + pelicula + ' de ' + director +  '.';

Si mostramos la constante favorita del ejemplo anterior por la consola o por pantalla, verías lo siguiente:

Mi película preferida es Alien de Ridley Scott.

También puedes usar el operador += para concatenar dos cadenas, agregando una cadena a otra:

let animal = 'Tiburón';
animal += ' blanco'; // Tiburón blanco

Además, también puedes usar el método concat(), disponible en los objetos de tipo String, y en consecuencia, también en las cadenas de tipo primitivo, ya que JavaScript convierte las cadenas de tipo primitivo en objetos String al realizar ciertas operaciones. Lo único que hace el método concat() es crear una nueva cadena resultante de agregar una nueva cadena a la cadena que usa el método:

const nombre = 'Edu';
const apellido = ' Lázaro';
const nombreCompleto = nombre.concat(apellido); // Edu Lázaro

La concatenación mediante el símbolo + o mediante el método concat() también funciona con los template literals o plantillas literales, que son las cadenas que se declaran con comillas invertidas ` en lugar de comillas dobles o simples:

const cadena = `Ayer comí ` + `higos`;

Una funcionalidad especial de las plantillas literales es que aceptan la inserción de valores, variables o expresiones mediante la sintaxis ${variable}:

const pelicula = "Alien";
const director = "Ridley Scott"
const favorita = 'Mi película preferida es ${pelicula} de ${director}.';

Si mostramos la constante favorita del ejemplo anterior por la consola deberías ver el siguiente resultado:

Mi película preferida es Alien de Ridley Scott.

Podrás usar la cadena resultante en tu aplicación con total normalidad.

En general, cuando trabajas con cadenas de tipo primitivo, lo más común es usar los operadores + o += para concatenar cadenas. En el caso de que quieras incluir variables en el interior de una cadena, lo más recomendable consiste en usar plantillas literales.

Esto ha sido todo.

---