Curso de JavaScript desde cero

¿Cómo funciona la concatenación en JavaScript?

Capítulo 12: Concatenar strings

Voy a tratar un tema crucial como es la concatenación. La concatenación es el hecho de unir dos strings. Pero, no es tan simple como esto. Ahora lo verás.

Ejemplo de concatenación en JavaScript

¿Qué tal si empezamos con un ejemplo de concatenación?

let texto1 = "Esto es Programación Fácil." + " Estás en el curso de" + " JavaScript.";

document.write(texto1);

¿Curioso, verdad? Acabo de unir tres strings en uno solo. Los he "sumado" por decirlo de alguna forma, aunque por supuesto, esto no es una suma, son dos concatenaciones. El texto no se puede sumar, si se puede unir.

Concatenación en JavaScript

Esto podrían ser varias variables con strings y funcionaría igual:

let texto1 = "Esto es Programación Fácil.";
let texto2 = " Estás en el curso de";
let texto3 = " JavaScript.";
let textoCompleto = texto1 + texto2 + texto3;

document.write(textoCompleto);
Concatenación en JavaScript

Además, puedes concatenar strings sin variable a estas variables.

let texto1 = "Esto es Programación Fácil.";
let texto2 = " Estás en el curso de";
let texto3 = " JavaScript.";
let textoCompleto = texto1 + texto2 + texto3 + " Soy un acoplado...";

document.write(textoCompleto);
Concatenar variables en JavaScript

Ya puedes diferenciar lo que es una suma entre dos números (number) o entre variables contenedoras de números y concatenar o unir dos strings o variables contenedoras de strings.

Concatenar con arrays

Aprovechando que ya te mostré el tema de los array, quiero que sepas que es posible concatenar strings contenidos en un array. Solo llama a las posiciones que creas necesarias.

let palabras = ["Hola.", " Hoy hace un", " día", " estupendo."];
let textoCompleto = palabras[0] + palabras[1] + palabras[2] + palabras[3];

document.write(textoCompleto);
Concatenar arrays en JavaScript

Ves haciendo pruebas, el orden en el que llames a las posiciones de un array da igual.
Por cierto, puedes llamar a posiciones sueltas de más de un array, solo pon el nombre y la posición. Tú tienes el control total de JavaScript.

Concatenar números en strings

Puedes almacenar valores numéricos en strings. Estos podrán ser operados por JavaScript. No obstante, de esta forma, concatena los dos strings, simplemente los une y no opera como si fueran números. Los trata como cadena de caracteres.

let numeroString1 = "56";
let numeroString2 = "44";
let sumaStrings = numeroString1 + numeroString2;
document.write(sumaStrings);
Concatenar números en strings en JavaScript

Aunque uno de los dos números fuese number, me los va a concatenar.

Podemos forzar la conversión de tipos de datos en estos casos. Algo conocido como casting. Esto lo veremos en el siguiente capítulo.


Ejercicios de JavaScript

  1. Crea una variable con dos strings concatenados. Después, crea otra variable con un solo string. Haz que aparezcan los valores de estos strings en el siguiente orden en una tercera variable y muestra el valor de esta en el navegador, ya sea en consola, en el documento o en un alert(). Primero el string que está solo en una variable y luego la concatenación de la primera.
  2. Concatena el siguiente array para que la frase cobre sentido y además, añade los espacios necesarios.
  3. let frase = ["posiciones", "se cuentan", "Las", "array", "cero.", "a partir", "del"];
  4. Añade a los siguientes strings los espacios necesarios para que no salga toda la frase sin espaciar.
  5. let frase = "JavaScript" + "es un lenguaje" + "esencial para crear" + "sitios web poderosos.";

    En el navegador saldría así:

    JavaScriptes un lenguajeesencial para crearsitios web poderosos.

La solución la encontrarás aquí: Soluciones de ejercicios de JavaScript.


Comentarios

Si te quedan dudas sobre el temario, sobre JavaScript o cualquier otra cosa relacionada o simplemente quieres agradecer, aquí tienes tu sitio para dejar tu granito de arena. Gracias por tus comentarios y por darle vida a este sitio web.

Twitter

Programación Fácil YouTube

Suscríbete

Si te ha gustado este curso y crees que el trabajo merece la pena, te agradeceré eternamente que te suscribas a mi canal de YouTube para apoyarme y que pueda seguir haciendo cursos gratuitos.

Además, si te encanta la programación, tienes un montón más de cursos gratuitos para ver.

No solo eso, podrás participar enviándome comentarios con tus sugerencias para temas específicos o cursos completos o incluso las dudas que tengas y las intentaré ir resolviendo en los cursos que estén todavía abiertos.