Concatenación de cadenas

javascript string cadenas

🔗 ¿Qué es la concatenación?

Concatenar significa unir cadenas de texto. Tomamos palabras sueltas y las juntamos en un solo mensaje.

➕ Uniendo con el operador +

Uno de los usos más comunes es mediante el operador +:

let saludo = "Hola";
let nombre = "Juan";
console.log(saludo + " " + nombre);

En este ejemplo:

  1. Tenemos la variable saludo con el texto "Hola"
  2. Tenemos la variable nombre con el texto "Juan"
  3. Agregamos un espacio " " entre las palabras para que no se junten
  4. Los operadores + unen todo en una sola cadena
Terminal window
Hola Juan

🔢 Uniendo números

Cuando concatenamos strings con números, JavaScript convierte automáticamente los números a strings:

let puntos = 1500;
let bonus = 300;
console.log("¡Has ganado " + puntos + " puntos y un bonus de +" + bonus + "!");

Terminal window
¡Has ganado 1500 puntos y un bonus de +300!

⚠️ Resultados inesperados

JavaScript maneja los tipos de datos de forma diferente según el operador:

  • Con +, si uno de los valores es un string, convierte todo a texto y realiza una concatenación
  • Con operadores matemáticos ( - , * , / ), intenta convertir los strings a números para realizar la operación

Por ejemplo:

"5" + 2; // "52" (concatenación)
"5" - 2; // 3 (resta numérica)
"5" * "2"; // 10 (multiplicación numérica)

Terminal window
52
3
10

🎯 Uniendo con plantillas literales (${})

Existe otra forma de unir cadenas, a este método se le conoce como plantillas literales.

Debemos usar las comillas invertidas (backticks) para crear una nueva cadena.

let jugador = "Mario";
let puntuacion = 1250;


// Forma tradicional con +
console.log("El jugador " + jugador + " alcanzó " + puntuacion + " puntos.");


// Forma moderna con plantillas literales
console.log(`El jugador ${jugador} alcanzó ${puntuacion} puntos.`);

Terminal window
El jugador Mario alcanzó 1250 puntos.
El jugador Mario alcanzó 1250 puntos.

Las ventajas de usar plantillas literales son:

  1. El código es más fácil de leer
  2. No necesitamos usar + para unir las partes
  3. Podemos incluir saltos de línea directamente
  4. Podemos usar expresiones dentro de ${}

📝 Ejemplo con múltiples líneas

let ciudad = "Barcelona";
let temperatura = 28;


console.log(`Ciudad: ${ciudad}
Temperatura: ${temperatura}°C`);

Terminal window
Ciudad: Barcelona
Temperatura: 28°C

Esta vez, con un solo console.log(), pudimos mostrar el producto y el precio en dos líneas diferentes.

☝️🤓
🏋️‍♂️ Ejercicio

  • Crea dos variables: nombre y pasatiempo.

  • Úsalas para formar una oración en console.log().

    Puedes usar cualquiera de los dos métodos de concatenación que aprendimos.

🏋️‍♂️ Ejercicio
  • Crea tres variables: producto, cantidad y precio.
  • Crea un mensaje que muestre un resumen de compra usando plantillas literales.
🚀 Extra

Investiga sobre el método concat() de los strings en JavaScript:

  1. ¿Cuál es su sintaxis?
  2. ¿Qué ventajas y desventajas tiene comparado con el operador + y las plantillas literales?
  3. Crea un ejemplo práctico donde concat() sea la mejor opción.

Pista: Busca en la documentación de MDN sobre String.prototype.concat()

Comentarios