How do I interpolate variable string in pug?

Question

In the following, myVar contains the string "Today, it's the ${date}". Furthermore, there is an variable with the name date that contains "1st of October". I expect the following pug syntax to replace the literal ${date} with the date variable content.

span!= myVar

Unfortunately, the example results in

<span>Today, it's the ${date}</span>

Expected result:

<span>Today, it's the 1st of October.</span>

Best regards, Benedikt

Abstraction

I suggest re-writing your question and try to explain better what you are trying to do because it doesn't make much sense. Put some real examples, and show what you have attempted so far. Do you mean myVar is a string, and part of that string is "${date}"? And if so, are you asking how to replace that? (if so, then you need to go and research "javascript replace in string" – Selfstarter

Sorry. I made it more clear. – Abstraction

Answer 1

Yes, exactly as @omgninjas pointed out, it is called interpolation and preceded by # in Pug.

However you can't always use it (eg. inside a string). Here are some examples:

sensor is a variable passed by the controller to the view.

1. Normal interpolation. Works as expected:

<div id=#{sensor} style="width:90%;height:250px;"></div>

2. Inside a string with Template Literals (don't use these with user supplied values!):

img(src=`/images/${sensor}.png`, style="width:20%")

3. Inside a string used to denote a function call. Note that you cannot use the ` symbol (back tick aka grave accent used in template literals) with function calls because you would have to ecompass the entire function call . This results in a string which is not going to be executed. You need to use string concatenation.

body(onload="initTemp('"+ sensor +"')")

Here is the official documentation for Pug interpolation: https://pugjs.org/language/interpolation.html

Hope this helps. Corrections and suggestions always welcome!

Brunildabruning

Answer 2

To render variables directly in a string in a Pug template, you can use the typical ES6 interpolation. Example (assuming pageTitle is in scope, and passed as template context):

 - var pageTitle = `Google | ${pageTitle}`;

Immediacy

Answer 3

Pug interpolates with a hash. #{interpolation}

Sadiron

and with default value - #{interpolation || DEFAULT_VALUE} – Mangle