Concatenación de cadenas

Generated avatar
javascript string cadenas

Tabla de contenido

🔗 ¿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

Compartir

Esta artículo aparece en estas rutas de aprendizaje

El curso más corto de programación (con JavaScript)

Conceptos fundamentales explicados de la manera más superficial para comenzar a entender de qué se trata la programación

Generated avatar