Using backticks with javascript and elixir

Question

Following a tutorial on Elixir and the Phoenix framework when this came up. The code is supposed to be

template.innerHTML = `
 <a href="#" data-seek="${this.esc(at}">
 <b>${this.esc(user.username)}</b>:${this.esc(body)}
 </a>`

Although this produces a compile error on the second line. If I change it to:

template.innerHTML = 
 '<a href="#" data-seek="${this.esc(at}">' +
 '<b>${this.esc(user.username)}</b>:${this.esc(body)}' +
 '</a>'

Then there are no errors, but it will display the exact string, and not replace the ${} sections. Not to sure what is going on. In the first snip-it, are the "quotes" wrapping around the string supposed to be back ticks or something else? Hard to tell looking at the book I'm reading.

• adeneo: Javascript doesn't have multiline strings, so that's no suprise, and the backticks are part of ES6 templating, leaving out the backtick means you can't use templates.
• gilly3: @adeneo - Multiline strings are introduced to JavaScript in es6 via template strings. It seems wrong for you to say there aren't multiline strings in JavaScript in the same sentence where you mention es6 template strings.
• adeneo: @gilly3 - template literals would allow multiline string interpolation, so okay, maybe the issue is just the missing parentheses for the this.esc() function in the template.

Answer 1

Always read the error messages and try to understand them. If I create an MCVE of your code like so:

var template = document.createElement("div");
var at = "place";
var body = "fancy";
var user = { username:"joe" };
var esc = s => s;
template.innerHTML = `
 <a href="#" data-seek="${this.esc(at}">
 <b>${this.esc(user.username)}</b>:${this.esc(body)}
 </a>`

I see this error message:

Error: {
 "message": "Uncaught SyntaxError: missing ) after argument list",
 "filename": "http://stacksnippets.net/js",
 "lineno": 20,
 "colno": 47
}

There's your answer right there! Add the missing ) after the argument list on line 20*, column 47. Let's try it:

var template = document.createElement("div");
var at = "place";
var body = "fancy";
var user = { username:"joe" };
var esc = s => s;
template.innerHTML = `
 <a href="#" data-seek="${this.esc(at)}">
 <b>${this.esc(user.username)}</b>:${this.esc(body)}
 </a>`
document.body.appendChild(template);

Voila!

*The stacksnippets hosting environment messed up the line number. It's actually on line 8 as far as we can tell.

Disclaimer: If you aren't using the latest build of Chrome, FireFox, or Edge, this may not work, as it uses features such as template strings and arrow functions introduced in ES6 and not present in older browsers.

• Ryan Erb: Wow, completely missed that. The error was a syntax error earlier on the line as I wasn't looking at that. Thanks!

Answer 2

ES6 allows using backticks to specify strings within which you can have interpolated expressions. Thus, any expression can be placed between the brackets after a dollar sign, a la ${}, and the return value of that code will appear in the string.

If your compiler can't handle that relatively new feature, then your second attempt to fix it should also involve pulling the expressions out of the string and concatting them separately.

template.innerHTML = 
 '<a href="#" data-seek="' + this.esc(at + '">' +
 '<b>' + this.esc(user.username) + '</b>:' + this.esc(body) +
 '</a>'

However, I see an error once I do this. this.esc(at isn't valid code. Looks like you're missing a parenthesis there. Probably your problem in the original code as well.

Soooo, try this (added the seemingly missing paren):

template.innerHTML = `
 <a href="#" data-seek="${this.esc(at)}">
 <b>${this.esc(user.username)}</b>:${this.esc(body)}
 </a>`

• Ryan Erb: Wow, completely missed that. The error was a syntax error earlier on the line as I wasn't looking at that. Thanks!