Hey!

The Jade source code displayed in this, and many of the other pages in these docs, is interactive. Edit it and see what happens!

Interpolation

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

String Interpolation, Escaped

Consider the placement of the template locals title, author, and theGreat in the following template.

- var title = "On Dogs: Man's Best Friend";
- var author = "enlore";
- var theGreat = "<span>escape!</span>";

h1= title
p Written with love by #{author}
p This will be safe: #{theGreat}

<h1>On Dogs: Man's Best Friend</h1>
<p>Written with love by enlore</p>
<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.

- var msg = "not my inside voice";
p This is #{msg.toUpperCase()}

<p>This is NOT MY INSIDE VOICE</p>

String Interpolation, Unescaped

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

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

<div class="quote">
  <p>Joel: <em>Some of the girls are wearing my mother's clothing.</em></p>
</div>

Danger

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

If you take a look at this page's source on GitHub, you'll see several places where the tag interpolation operator is used, like so.

p.
  If you take a look at this page's source #[a(target="_blank", href="https://github.com/jadejs/jade/blob/master/docs/views/reference/interpolation.jade") on GitHub],
  you'll see several places where the tag interpolation operator is
  used, like so.

<p>If you take a look at this page's source <a href="https://github.com/jadejs/jade/blob/master/docs/views/reference/interpolation.jade">on GitHub</a>,
  you'll see several places where the tag interpolation operator is
  used, like so.
</p>

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