Pug (anteriormente conocido como Jade) es un motor de plantillas de NodeJS que nos permite preprocesar código HTML de una manera más rápida y sencilla. Nos otorga una sintaxis más limpia y poderosa en la que se incluyen nuevas características como ciclos, variables, mixins, etc. El día de hoy nos centraremos más en las variables.
Las variables en Pug nos permiten guardar información que por lo general termina siendo compilada. Conforme va creciendo un proyecto, es normal ir declarando nuevas variables para implementarlas en distintos lugares, el problema empieza cuando en una línea de código debes mezclar varias variables con cadenas de texto.
El propósito de este artículo es mostrarte las distintas opciones que tienes para interpolar variables y así facilitarte el uso de las variables en distintos ámbitos.
Value output - String Interpolation
Empecemos por lo más básico, que es la salida o compilación de una variable. La sintaxis es etiqueta= variable.
-let number = 30
p= number
Compila a:
<p>30</p>
Nada del otro mundo, ¿verdad? Pero, ¿y si queremos agregarle una cadena de texto? Lo usual sería concadenar con la variable, lo cual es válido, lo tedioso empieza cuando tienes muchas variables y debes juntarlas con varias cadenas de texto. Aquí es donde la interpolación se vuelve nuestra fiel acompañante. La sintaxis para interpolar es la siguiente: etiqueta Cadena-de-texto #{variable}
Concadenando variables
-let name = "Jorge Matias", age = 22, address = "New York City"
p= "Hola, mi nombre es " + name + ", tengo " + age + " años y vivo en " + address
Interpolando variables
-let name = "Jorge Matias", age = 22, address = "New York City"
p Hola, mi nombre es #{name}, tengo #{age} años y vivo en #{address}
Ambos compilan a:
<p>Hola, mi nombre es Jorge Matias, tengo 22 años y vivo en New York City</p>
Template string
Las template string es otra manera de interpolar variables proveniente de Javascript ES6. Hay que aclarar que, si bien es la misma sintaxis, no quiere decir que con Javascript podamos acceder a las variables que tenemos declaradas en Pug. La sintaxis es la siguiente: etiqueta= ` Cadena de texto ${variable} `. Usemos el ejemplo anterior.
-let name = "Jorge Matias", age = 22, address = "New York City"
p= `Hola, mi nombre es ${name}, tengo ${age} años y vivo en ${address}`
Compila a:
<p>Hola, mi nombre es Jorge Matias, tengo 22 años y vivo en New York City</p>
Unescaped
Algo que sucede con Pug es que si tienes caracteres especiales en una variable, al momento de compilar muestra el código del caracter y no el caracter en sí.
-let name = "<b>Pedro</b>"
p Hola de nuevo, #{name}
Compila a:
<p>Hola de nuevo, <b>Pedro</b></p>
Para evitar que esto suceda usaremos el signo de !, la ubicación de éste dependerá de la clase de interpolación que usemos. Si usamos una interpolación nativa, debemos reemplazar el # por ! y si usamos template string es añadir ! antes del =.
-let name1 = "<b>Pedro</b>", name2 = "<i>Luis</i>"
p Hola de nuevo, !{name1}
p!= `¿Cómo estás, ${name2}?`
Compila a:
<p>Hola de nuevo, <b>Pedro</b></p>
<p>¿Cómo estás, <i>Luis</i>?</p>
Tag Interpolation
Una cosa fantástica en Pug es que la interpolación no se detiene con las variables, sino que también puedes hacerlo con etiquetas html. La sintaxis para hacerlo es la siguiente: #\$&etiqueta contenido\$&
p Estamos interpolando #[span etiquetas html], ¿no es eso genial?
Compila a:
<p>Estamos interpolando <span>etiquetas html</span>, ¿no es eso genial?</p>
Lo mejor de todo es que la interpolación de variables convive en armonía con la interpolación de etiquetas
-let text1 = "interpolación en Pug", text2 = "¿No es eso genial?"
p Mezclamos dos clases de #[b= `${text1}`], #[span #{text2}]
Compila a:
<p>Mezclamos dos clases de <b>interpolación en Pug</b>, <span>¿No es eso genial?</span></p>
Whitespace Control
La interpolación es muy útil cuando se habla de texto en una línea, pero utilizando whitespace control podemos crear estructuras con anidaciones más complejas con ayuda del caracter | y las identaciones (no olvides las separaciones que debe haber entre las palabaras). Ejemplo:
p
| Estamos utilizando
strong el control de
| espacio
i en blanco
Compila a:
<p>Estamos utilizando<strong> el control de</strong> espacio<i> en blanco</i></p>
La ventaja de utilizar whitespace control es que podemos tener los niveles de anidación que deseemos y mezclarlas con las interpolaciones anteriormente mencionadas.
-let name = "EDteam", text = "aplicando"
p
| Estamos
span= `${text} todo`
| lo
b aprendido
| en el #[i blog de] #{name}
Compila a:
<p>Estamos <span>aplicando todo lo<b> aprendido</b></span> en el <i>blog de</i> EDteam</p
Después de leer este artículo, manejar variables con cadenas de texto en Pug no volverá a ser un problema.