ES6: Template Literals ¡Oh my God!

¿Cuántas veces nos hemos visto envueltos en un infierno de comillas dobles, simples y medio pensionistas a la hora de añadir contenido dinámico al DOM?

¡Sí! ¡Hablo contigo!

Pongamos el caso de querer añadir a un <table> la siguiente fila  (<tr>)  rellena con los datos recibidos en una respuesta JSON:

¡Valgame, Cristo! ¿Esto qué es? Hemos creado una variable JS llamada contenido para ir montando nuestro fragmento HTML dinámicamente con los datos de la respuesta JSON que en este caso se llama reserva.

No os quejéis, pues yo he visto esto en una sola línea para evitar el dividir la sentencia en varios bloques y ahorrarse levemente el infierno de las comillas dobles y simples necesarias para los saltos de línea.

Hay otra manera más elegante para salvar esto último, pero no nos llevemos a engaño;  tampoco es que sea la panacea ni ningún bálsamo de Fierabrás, pues nos quitaremos las concatenaciones sobre la variable contenido, pero le añadiremos la complejidad en la lectura de las barras invertidas o backslash.

Un fragmento utilizando esta última modalidad  de escape sería el siguiente:

   var cadenaHTML = "Esto es una cadena,  pero  \
    como es larga y poco legible \
    la hemos partido en 3 líneas distintas usando el backslash";

Si alguien quiere plantarse aquí y seguir utilizando esta estructura, no vamos a meternos con él, pero que tenga por seguro que no va a ganar el gallifante de ES6 que teníamos preparado para los fieras que lean hasta el final este artículo y comiencen a utilizar una de las potencialidades de ES6: los llamados Template Literals.

Las plantillas de cadena de texto (template strings o template literals) son literales de texto que habilitan el uso de expresiones incrustadas de una forma mucho más elegante.

Un template literal es una nueva forma, mucho más limpia, de acoplar datos a una cadena Javascript de tipo string sin perder la cabeza en el intento y sin llenar la pantalla de dedazos contando qué comillas se han quedado sin cerrar después de que el navegador se nos queje de un error de sintaxis.

Unos ejemplos de la estructura de un template string serían los siguientes:

`cadena de texto`
 
`línea 1 de la cadena de texto
 línea 2 de la cadena de texto`
 
`cadena de texto ${expresión} texto`

 

Como podéis comprobar, se hace muy sencillo añadir saltos de línea a los literales y lo único que cambia con respecto a la antigua manera de declarar un string es el uso de la comilla invertida (grave acent en inglés ) en vez de la comilla doble o la simple.

Para añadir expresiones al string debemos encerrar las mismas entre corchetes y con un dolar delante (${expresión}).

Nuestro ejemplo inicial, nuestro infierno de Dante quedaría mucho más elegante. Tan elegante que dan ganas de invitarle a cenar al Villamagna de Madrid.

Pues hasta aquí la entrada de hoy. Ha sido fácil ¿verdad?

¡Hasta más ver!

Responder

Introduce tus datos o haz clic en un icono para iniciar sesión:

Logo de WordPress.com

Estás comentando usando tu cuenta de WordPress.com. Cerrar sesión /  Cambiar )

Google photo

Estás comentando usando tu cuenta de Google. Cerrar sesión /  Cambiar )

Imagen de Twitter

Estás comentando usando tu cuenta de Twitter. Cerrar sesión /  Cambiar )

Foto de Facebook

Estás comentando usando tu cuenta de Facebook. Cerrar sesión /  Cambiar )

Conectando a %s

Crea un sitio web o blog en WordPress.com

Subir ↑

Crea tu página web en WordPress.com
Empieza ahora
A %d blogueros les gusta esto: