El 14 de septiembre de 2017, publicamos una versión revisada de nuestra Política de privacidad. Tu uso continuado de video2brain.com significa que aceptas este documento revisado, por lo que te recomendamos que dediques unos minutos a leerlo y comprenderlo.

JavaScript esencial

Cómo funcionan en JavaScript las plantillas y los literales

Prueba ahora LinkedIn Learning sin cargo y sin compromiso.

Prueba gratis Mostrar modalidades de suscripción
Las plantillas son una característica de JavaScript que nos permitirán generar vistas o bloques de código que podremos reusar a lo largo de nuestra aplicación. Aprende la sintaxis específica que existe para trabajar con las plantillas y conoce cómo usarla en tu código.
03:54

Transcripción

Una de las cosas verdaderamente funcionales cuando trabajamos con cadenas de texto que posee JavaScript es el uso de plantillas y literales. Veamos cómo funciona esto. Primero tenemos aquí una variable llamada'lenguaje'que dice: JavaScript, una variable HTML, y tenemos una breve'mensaje'que está vacía y que podemos mandar imprimir aquí, en consola. Lo que nosotros queremos hacer es escribir un mensaje que concatene los datos. Por ejemplo, yo puedo escribir "Me gusta JavaScript". Pero si yo quisiera utilizar el JavaScript que tengo acá, lo que tendría que hacer yo normalmente es escribir el símbolo de más y poner la palabra'lenguaje'. Cuando yo actualizo mi navegador, dice "Me gusta JavaScript". Esto puede ser correcto, pero a la larga cuando nosotros necesitemos estar manteniendo nuestro código o agregarle más funciones puede ser algo complicado. Entonces ¿qué vamos a hacer? Primero voy a eliminar todo el contenido del mensaje porque desde aquí comienza el truco. Lo primero es utilizar unas comillas especiales que también se pueden conocer como "backticks". Estas "backticks" o comillas especiales me van a ayudar a determinar la manera en cómo voy escribir esto. Es decir, con este tipo de comillas tendré la capacidad de escribir plantillas. ¿Y de qué manera lo voy a hacer? Primero, de la manera tradicional, escribiendo "Me gusta". Y cuando yo quiero usar la palabra'lenguaje', en lugar de concatenar voy a utilizar el símbolo de dólar o pesos, y después de esto voy a trabajar con un par de llaves. Aquí, adentro de las llaves, voy a mandar el nombre de la variable y, si te das cuenta, esto cambia de color también dependiendo de tu editor de código. Vamos a guardar nuevamente y actualizamos y vemos como ahora tenemos el texto que dice: "Me gusta JavaScript". Esto, obviamente, nos permite tener una plantilla más versátil. Y, de hecho, si yo quisiera trabajar con otra variable lo puedo hacer, es decir, puedo integrar tantos elementos como yo necesite dentro de esta cadena de texto. Entonces, por ejemplo, quiero decir: "Me gusta'lenguaje' y su integración con el lenguaje2". Así que comenzamos nuevamente: símbolo de dólar o pesos, y aquí vamos a mandar el nombre de la variable que tenemos, que es'lenguaje2'. Actualizamos nuestro navegador y vemos como el texto cambia y dice: "Me gusta JavaScript y su integración con HTML". Esto es bastante usable. De hecho, cuando tú llegas a trabajar con colecciones de datos muy grandes y necesitas estar actualizando continuamente, esto te facilita bastante el manejo de una plantilla. Ahora veamos lo siguiente. Voy a comentar este'console. log'y voy a descomentar esta variable que se llama'mensaje multimedia'y por tanto también su'console. log'. Lo que aquí voy a hacer es también utilizar una plantilla, pero puedo usarla en modo multilínea. ¿Qué es esto? Trabajo con los "backticks" nuevamente, pero aquí tenemos una ventaja: podemos trabajar con distintas líneas y así yo puedo ordenar mi texto. Entonces, ¿qué te parece si yo desde aquí escribo el siguiente texto que dice: "Hola mundo, estoy aprendiendo lenguaje", que es la variable que tenemos acá, "y me gusta como se integración con HTML y CSS". Nos podemos dar cuenta que este texto está mal, entonces vamos a corregirlo: "y me gusta como se integra", que es lo que debería decir "con HTML y CSS". Solamente para quitar este último espacio dejaremos el "backtick" que cierra en esta parte y actualizamos nuestro navegador. Como puedes ver, cuando mandamos el texto, este sigue respetando la multilínea. Esto es una de las grandes ventajas que se tiene cuando trabajamos con plantillas y literales. De esta manera, trabajar con cadenas de texto llega a un nuevo nivel y de esto puedes sacar muchísimo provecho cuando escribes código.

JavaScript esencial

Aprende y conoce JavaScript empezando por entender sus conceptos más básicos y esenciales, pero considerando en todo momento la nueva especificación del lenguaje ES6.

5:26 horas (90 Videos)
Actualmente no hay comentarios.
 
Software:
Fecha de publicación:12/09/2017

Este curso video2brain está disponible como descarga y para ser visualizado online. ¡Pero no hace falta que decidas entre las dos opciones! Al comprar el curso, disfrutarás de ambas posibilidades.

La descarga te permite ver las lecciones sin estar conectado/a a internet y supone una navegación fácil y ágil entre capítulo y capítulo. Si vas a trabajar en diferentes ordenadores o si no quieres descargarte el curso completo, entra en la web con tus datos de acceso y disfruta directamente de tus vídeos online. Te deseamos que disfrutes de este curso y te resulte de mucha utilidad.

Estamos a tu disposición si tienes cualquier tipo de duda o pregunta.