Las 3 mejores formas para concatenar cadenas de texto en JavaScript

Resumen: en este tutorial, aprenderás cómo concatenar cadenas de texto en JavaScript.

Introducción para concatenar strings en JavaScript

JavaScript proporciona varias opciones que te permiten concatenar dos o más strings:

• Usa el método concat()
• Utiliza los operadores + y +=
• Usar las plantillas literales

1) Usando el método concat()

String.prototype.concat() concatena dos o más cadenas de texto y devuelve una nueva cadena:

let newString = string.concat(...str);

La función concat() acepta un número variado de argumentos de string y devuelve una nueva cadena que contiene los argumentos de cadena combinados.

Si pasas argumentos que no son strings a concat(), convertirás estos argumentos en una cadena antes de concatenar. Por ejemplo:

let racing = 'Formula ' + 1;
console.log(racing);

Resultado:

Formula 1

Este ejemplo concatena cadenas en una nueva cadena:

let result = concat('JavaScript', ' ', 'String',' ', 'Concatenation');
console.log(result);

Resultado:

JavaScript String Concatenation

El siguiente ejemplo concatena todos los elementos de cadena en una matriz o array en una cadena:

let list = ['JavaScript',' ', 'String',' ', 'Concatenation'];
let result = ''.concat(...list);

console.log(result);

Resultado:

JavaScript String Concatenation

2) Usando los operadores + y +=

El operador + te permite concatenar dos cadenas. Por ejemplo:

let lang = 'JavaScript';
let result = lang + ' String';

console.log(result);

Resultado:

JavaScript String

Para concatenar una cadena pieza por pieza, utilizando el operador +=:

let className = 'navbar';
className += ' primary-color';
className += ' sticky-bar';

console.log(className);

Según una prueba de rendimiento en algunos navegadores web modernos, los operadores + y += funcionan más rápido que el método concat().

3) Usar plantillas literales

ES6 presenta las plantillas literales que te permiten realizar la interpolación de cadenas.

El siguiente ejemplo muestra cómo concatenar tres cadenas:

let navbarClass = 'navbar';
let primaryColor = 'primary-color';
let stickyClass = 'sticky-bar';

let className = `${navbarClass} ${primaryColor} ${stickyClass}`;

console.log(className);

Resultado:

navbar primary-color stickyBar

Resumen

En este tutorial, has aprendido a concatenar cadenas en JavaScript utilizando el método concat(), el operador + y += y las plantillas literales.