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.

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. — adeneo
– adeneo, Commented Jul 1, 2016 at 21:08
@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. — gilly3
– gilly3, Commented Jul 1, 2016 at 21:14
@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. — adeneo
– adeneo, Commented Jul 1, 2016 at 21:17

Community · Accepted Answer · 2017-05-23 12:22:41Z

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.

edited May 23, 2017 at 12:22

CommunityBot

11 silver badge

answered Jul 1, 2016 at 21:35

gilly3

92.6k26 gold badges148 silver badges179 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Ryan Erb Over a year ago

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

Kyle Baker · Accepted Answer · 2016-07-01 21:11:15Z

1

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>`

answered Jul 1, 2016 at 21:11

Kyle Baker

3,7202 gold badges28 silver badges36 bronze badges

1 Comment

Ryan Erb Over a year ago

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

Collectives™ on Stack Overflow

Using backticks with javascript and elixir

2 Answers 2

1 Comment

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related