Concatenación de 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

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 + "!");

¡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)

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.`);

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`);

Ciudad: Barcelona
Temperatura: 28°C

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

Comentarios

Compartir