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.