In this part of the pugjs tutorial series we will learn about interpolation in pugjs. Interpolation is a process of insertion of something of different nature into something else. We have 2 types of interpolation in pugjs :
There are 2 types of string interpolation available in pug which are explained below :
//Name of the file : escaped-string-interpolation.pug
- var main = "Nodejsera's Pug Tutorial";
- var writer = "Team Nodejsera";
- var copy = "<h3>Copyrighted!</h3>";
h1= main
p Authored By : #{writer}
p And All this content is: #{copy}
>pug escaped-string-interpolation.pug
rendered escaped-string-interpolation.html
escaped-string-interpolation.html
file and observe the interpolated content from pug to html.
<h1>Nodejsera's Pug Tutorial</h1>
<p>Authored By : Team Nodejsera</p>
<p>And All this content is: lt; h3 gt;Copyrighted! lt; /h3 gt;</p>
//Name of the file : unescaped-string-interpolation.pug
- var content = "<b>Nodejsera</b>"
p This is a !{content}
>pug unescaped-string-interpolation.pug
rendered unescaped-string-interpolation.html
unescaped-string-interpolation.html
file and observe the interpolated content from pug to html.
<p>This is a <b>Nodejsera</b></p>
Pug also supports tag interpolations. We just need to Wrap an inline Pug tag declaration in
#[
and ]
, and it'll be evaluated and buffered into the content of
its containing tag as shown in examples below:
//Name of the file : tag-interpolation-1.pug
p.
We are testing here tag interpolation in pug.js
where #[b all the content will be bold] and
#[u this text will be underlined].
>pug tag-interpolation-1.pug
rendered tag-interpolation-1.html
tag-interpolation-1.html
file and observe the interpolated content from pug to html.
<p>We are testing here tag interpolation in pug.js
where <b>all the content will be bold</b> and
<u>this text will be underlined</u>.</p>
//Name of the file : tag-interpolation-2.pug
span
| this is not written with tag interpolation so we can observe
b some unexpected
| results
strong after
| after using this method.
p.
however on the other hand, whitespace is #[b very well considered] and #[strong in tag interpolation] as we can observe
>pug tag-interpolation-2.pug
rendered tag-interpolation-2.html
tag-interpolation-1.html
file and observe the interpolated content from pug to html.
<span>this is not written with tag interpolation so we can observe<b>some unexpected</b>results<strong>after</strong>after using this method.
</span><p>however on the other hand, whitespace is <b>very well considered</b> and <strong>in tag interpolation</strong> as we can observe</p>
In this article, we learned about interpolation in pug.js and all its available types like string interpolation and tag interpolation.