Pasar al contenido principal

🔥 Hoy comenzamos la especialidad en programación backend con PHP con Yesi Days ¡La primera clase es en vivo y gratis! 😍 Reserva tu lugar. Comienza en:

Alexys Lozada
José Luján
Manuel Rodriguez
José Luján
Luis Avilés
Álvaro Felipe
José Luján
Beto Quiroga
Jonathan MirCha
Jonathan MirCha
Álvaro Felipe
Alexys Lozada, Álvaro Felipe, Jonathan MirCha
Beto Quiroga
Alexys Lozada
Alexys Lozada
José Luján
Álvaro Felipe
Álvaro Felipe
Jonathan MirCha
Jonathan MirCha
Alexys Lozada, José Luján
Alexys Lozada, José Luján
Alexys Lozada, José Luján
Camilo Adobe
Álvaro Felipe
José Luján
Jonathan MirCha
Álvaro Felipe
Álvaro Felipe
Beto Quiroga, Alexys Lozada
Álvaro Felipe
Juan Villalvazo
Luis Avilés
Jonathan MirCha
Jonathan MirCha
Jonathan MirCha

Formas de interpolar variables en Pug

Aprende a cómo usar las distintas formas de interpolación de variables en Pug y la diferencia que hay entre éstas

Interpolación con Pug

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, &lt;b&gt;Pedro&lt;/b&gt;</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.

Suscríbete al blog de EDteam

Ingresa tu correo electrónico para recibir nuestro boletín semanal