Interpolation

Pug provides operators for a variety of your different interpolative needs.

String Interpolation, Escaped

Consider the placement of the following template’s locals: title, author, and theGreat.

  1. - var title = "On Dogs: Man's Best Friend";
  2. - var author = "enlore";
  3. - var theGreat = "<span>escape!</span>";
  5. h1= title
  6. p Written with love by #{author}
  7. p This will be safe: #{theGreat}
  1. <h1>On Dogs: Man's Best Friend</h1>
  2. <p>Written with love by enlore</p>
  3. <p>This will be safe: &lt;span&gt;escape!&lt;/span&gt;</p>

title follows the basic pattern for evaluating a template local, but the code in between #{ and } is evaluated, escaped, and the result buffered into the output of the template being rendered.

This can be any valid Javascript expression, so you can do whatever feels good.

  1. - var msg = "not my inside voice";
  2. p This is #{msg.toUpperCase()}
  1. <p>This is NOT MY INSIDE VOICE</p>

Pug is smart enough to figure out where the expression ends, so you can even include } without escaping.

  1. p No escaping for #{'}'}!
  1. <p>No escaping for }!</p>

If you need to include a verbatim #{, you can either escape it, or use interpolation. (So meta!)

  1. p Escaping works with \#{interpolation}
  2. p Interpolation works with #{'#{interpolation}'} too!
  1. <p>Escaping works with #{interpolation}</p>
  2. <p>Interpolation works with #{interpolation} too!</p>

String Interpolation, Unescaped

You don’t have to play it safe. You can buffer unescaped values into your templates, too.

  1. - var riskyBusiness = "<em>Some of the girls are wearing my mother's clothing.</em>";
  2. .quote
  3.   p Joel: !{riskyBusiness}
  1. <div class="quote">
  2.   <p>Joel: <em>Some of the girls are wearing my mother's clothing.</em></p>
  3. </div>
Caution

Keep in mind that buffering unescaped content into your templates can be mighty risky if that content comes fresh from your users. Never trust user input!

Tag Interpolation

Interpolation works not only on JavaScript values, but on Pug as well. Just use the tag interpolation syntax, like so:

  1. p.
  2.   This is a very long and boring paragraph that spans multiple lines.
  3.   Suddenly there is a #[strong strongly worded phrase] that cannot be
  4.   #[em ignored].
  5. p.
  6.   And here's an example of an interpolated tag with an attribute:
  7.   #[q(lang="es") ¡Hola Mundo!]
  1. <p>This is a very long and boring paragraph that spans multiple lines. Suddenly there is a <strong>strongly worded phrase</strong> that cannot be
  2.   <em>ignored</em>.</p>
  3. <p>And here's an example of an interpolated tag with an attribute:
  4.   <q lang="es">¡Hola Mundo!</q></p>

You could accomplish the same thing by writing an HTML tag inline with your Pug…but then, what’s the point of writing the Pug? Wrap an inline Pug tag declaration in #[ and ], and it’ll be evaluated and buffered into the content of its containing tag.

Whitespace Control

The tag interpolation syntax is especially useful for inline tags, where whitespace before and after the tag is significant.

By default, however, Pug removes all spaces before and after tags. Check out the following example:

  1. p
  2.   | If I don't write the paragraph with tag interpolation, tags like
  3.   strong strong
  4.   | and
  5.   em em
  6.   | might produce unexpected results.
  7. p.
  8.   If I do, whitespace is #[strong respected] and #[em everybody] is happy.
  1. <p>If I don't write the paragraph with tag interpolation, tags like<strong>strong</strong>and<em>em</em>might produce unexpected results.</p>
  2. <p>If I do, whitespace is <strong>respected</strong> and <em>everybody</em> is happy.</p>

See the whitespace section in the Plain Text page for more discussion on this topic.