Concatenar strings - Curso de JavaScript de cero a máster - Capítulo 12

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.

Cómo concatenar en JavaScript

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

Código JavaScript 

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

document.write(texto1);

Resultado en el navegador

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

Código JavaScript 

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

Resultado en el navegador

Concatenación en JavaScript

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

Código JavaScript 

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

Resultado en el navegador

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.

Código JavaScript 

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

document.write(textoCompleto);

Resultado en el navegador

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.

Código JavaScript 

let numeroString1 = "56";
let numeroString2 = "44";
let sumaStrings = numeroString1 + numeroString2;
document.write(sumaStrings);

Resultado en el navegador

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. Despúes, crea otra variable con un solo string. Haz que aparezcan los valores de estos strings en el siguiente orden en una tercera variable y múestra 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"];

  3. Añade a los siguientes strings los espacios necesarios para que no salga toda la frase sin espaciar.
    4. 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í: Haz click aquí.

Capítulos

    Suscríbete a mi canal de YouTube para apoyarme

    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.

    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.