Cuando trabajamos con cadenas en JavaScript, una de las primeras cosas que aprendemos es la concatenación. Concatenar implica unir el contenido de dos expresiones (cadenas). En JavaScript, el operador para concatenar es el signo de más (+). Durante muchos años, esta era la única forma que teníamos para realizar una concatenación.
Sin embargo, con el lanzamiento de la versión de ECMAScript 6, o ES2015, recibimos una nueva ayuda para realizar no solo la concatenación de cadenas, sino también la interpolación de variables: ganamos las Template Strings. Con ellas es mucho más simple incluso mostrar el valor de variables en nuestros textos.
Para crear una template string debemos usar la tilde (`). Puedes activarla con Shift + ´ en Windows o Option + ´ en Mac. Para acceder a variables, solo debes usar el signo de dólar ($) junto con llaves y el nombre de la variable entre ellas.
Veamos dos ejemplos de cómo las template strings son prácticas.
Ejemplo 01 - Mostrar los valores de un objeto simple en la consola
Ve este código:
Con él hemos creado un objeto llamado user y estamos mostrando sus valores a través de console.log(). Veamos el resultado:
Observa que los valores de las variables están correctamente identificados y mostrados. Pero, ¿te diste cuenta de cómo necesitamos digitar varias veces el signo de más (+) y también abrir y cerrar comillas repetidamente? Esto puede confundirnos cuando trabajamos con mucha información. Veamos cómo sería el mismo código con Template Strings:
El resultado será el mismo, pero observa qué diferencia al leer el código, mucho más simple y fácil de entender.
Ejemplo 02 - Crear el contenido HTML de una tabla dinámicamente
Ahora vamos a crear el contenido de una tabla que mostrará el valor de las variables de nuestro objeto usando la concatenación “clásica”. Veamos cómo quedará el código:
Observa que las variables son las mismas del último ejemplo. El resultado será:
Genial, la tabla fue creada correctamente. Sin embargo, nuevamente notamos la cuestión de muchos signos de más en la cadena, además de tener que abrir y cerrar las comillas en cada salto de línea. Veamos ahora con Template Strings:
Increíble, ¿no es así? Nuestro código está mucho más limpio. Si es más fácil de leer, con certeza fue más fácil de desarrollar también.
Estos dos ejemplos demostraron cómo las Template Strings realmente son sensacionales. Por eso, si puedes, úsalas en tus proyectos, no te arrepentirás.
JavaScript ha evolucionado mucho en los últimos tiempos y es bueno poder seguir sus novedades que elevan el nivel de este lenguaje cada vez más.
No olvides suscribirte a nuestro canal en Youtube para recibir contenido interesante de desarrollo web en video también, hasta el próximo artículo.
¿Te gustó este artículo?
¿Te gustaría aprender más sobre JavaScript? Entonces suscríbete a nuestro Curso Completo de JavaScript. Aprende con dos especialistas sobre los diversos recursos de este lenguaje, con proyectos reales y el método Hcode de enseñanza ;)