En este video vemos una de las grandes mejoras en las nuevas versiones de JavaScript.
Se le conoce como templetes strings temple literales.
Hay muchas formas de nombrarlos si ya tienes experiencia con el lenguaje te darás cuenta que concatenar
valores mezclar HTML mezclar strings con variables puede ser muy muy complicado si no tienes experiencia
con el lenguaje.
Vamos a ver un ejemplo utilizando los dos enfoques el anterior y el nuevo este video se llama temple
strings.
Una de las grandes mejoras en JavaScript voy a crear dos variables pero en mi nombre puedes poner el
tuyo Juan y vamos a poner aquí trabajo.
Desarrollador Web punto y coma.
Ambas variables si por ejemplo lo pones aquí Consol punto log Consol log y hemos concatenado en todo
el curso en todas las partes que hemos visto.
JavaScript nombre dos puntos y luego más.
Por qué vas a mezclar un string con una variable con el nombre.
Es más lo concatena nuevamente con las comillas una coma trabajo dos puntos de espacio y luego nuevamente
le pones concatenar porque vas a agregar una segunda variable cuerdas cambios y ves que realiza el trabajo
correctamente cuál es el problema de estos signos de más que muy fácilmente se te puede olvidar poner
uno si no pones uno y guardas cambios puedes ver qué nos dice un error que no tiene nada que ver te
dice que te falta un paréntesis y vienes a tu código y ves que tienes un paréntesis aquí tienes otro
Key y la verdad es que el error no tiene nada que ver con lo que está pasando.
Es muy fácil olvidarte de esos paréntesis.
Aquí tenemos un ejemplo muy sencillo de una sola línea pero va a haber ocasiones y ha pasado que tienes
que concatenar 20 líneas de HTML y se vuelve muy complicado ponerlas que más tal vez entre con este
código de una sola línea no haya mucha diferencia pero vamos a ver el Consol log que tendrías que crear
para hacer lo mismo pero con un templates string primero en lugar de poner esas comillas que son derechas
tienes que poner unas comillas que son inclinadas en mi teclado pero es una Mac están después de la
letra P hacia la derecha.
La verdad es que no sé en Windows en qué parte se encuentre pero bueno es una comilla inclinada.
Aquí le voy a poner nombre dos puntos y en lugar de concatenar utiliza un signo de dólar.
Abro mis llaves y aquí pongo mi variable nombre pongo la coma que es la misma komas que está aquí arriba.
Incluso puedo copiar esta parte y nuevamente agregó signo de dólar llaves trabajo.
Este signo de dólar ya ves lo que hace es decirle esto es una variable o puede ser bien una función
entonces Ok estoy inyectando código una string pero esta paz que trata la diferente y esto viene siendo
una variable entonces punto y coma al final guardamos cambios y vemos que el resultado es el mismo.
Poca diferencia hay entre uno y otro en cuanto el ahorro de caracteres pero no vas a tener ese problema
de si te falta un signo de más puedes ver que el código se ve mucho más ordenado.
Ahora vamos a ver un ejemplo un poco más avanzado un poco con poco más de código.
Como mencioné anteriormente concatenar se vuelve más complicado con múltiples líneas aquí tenemos este
mensaje por lo tanto lo voy a seleccionar te va a poner cons contenedor AP y un video donde scripting
y todo esto aquí dice el lector y voy a poner ese mensaje.
Estas son funciones document .4 selector que nos van a permitir seleccionar un elemento de HTML cree
una variable Lek y lo voy a nombrar HTML como un signo de igual pongo comillas y voy a crear una lista
ordenada Order List concatena con un signo además le voy a dar enter y lo pongo nuevamente en el Lehi
cierro y le pongo nombre y pongo el signo de más inyectarme variable.
Aquí nuevamente comillas cierro la ley importante al final siempre tienes que ponerle el signo además
voy a crear una copia de ésta va a ser muy similar de qué iba a hacer trabajo trabajo.
Y reemplazo la variable si además no tiene que faltar y aquí nuevamente comillas cierro el orden LIX
punto y coma.
Para agregarlo al HTML tengo que poner aquí contenedora y luego a colocar y eliminar este espacio Punto
y HTML igual a HTML y puedes ver que lo inyectan HTML nombre Juan trabajo desarrollador web pero puedes
ver cuantos signos de más tengo tengo uno aquí y otra KK y puede ser que se te olvide o no si se te
olvida este último no hay ningún problema si lo pones aquí este último va a trabajar y se va a ver bien
pero tal vez se te olvida uno intermedio o uno de los primeros puedes ver que aquí nada más dice nombre
Juan y vas a ver que no hay ningún error en tu consola no hay errores pero está cortado el texto y es
hasta que comienzas a ver línea por línea que te das cuenta de que hace falta el signo de más entonces
es un poco confuso ese signo además veamos la forma con el temple de Streeck voy a crear otra variable
HTML 2 y aquí voy a darle espacio ponéis la comida inclinada nuevamente 2 y pones una orden Liz huele
X le das enter porque está comilla tiene que ir hasta el final más o menos lo puedes intentar para acomodarla
bien y le pones el cierre del huele y dentro se hace más fácil porque nadas con ese Lehi nombre y abres
llave que abre el signo de dólar llaves nombre y cierras el delay y el otro es más fácil porque nada
más y no aquí entra trabajo y la variable también se lugar de tener HTML tienes HTML 2 y guardas cambios
y puedes ver que te da prácticamente el mismo resultado se ve mucho más limpia esta sintaxis que esta
y no tienes ese problema de que no concatenado con la línea anterior y te muestra contenido corto.
Entonces esta forma es mucho más limpia se ve mejor y la mayoría de los guardas de hoy en día así es
como escriben el HTML.
La verdad es que se ve bien mucho mejor y en el siguiente vídeo vamos a continuar aprendiendo más de
lo básico del lenguaje.