Javascript multiline string issue

Question

My code is:

let testStr = "Asdfads";
let htmlStr = `<script>${ testStr }</script>`; // but it works with: <div>${ testStr }</div>
console.log(htmlStr);

It returns me an error:

Uncaught SyntaxError: Unterminated template literal

What do I do wrong? I run it on the latest Chrome.

@user202729, it doesn't work in the snippet also! I'm using MacOS X 10.12 — JavaRunner
– JavaRunner, Commented Feb 8, 2018 at 14:52
@epascarello So, template literal is actually a modern document.write ..? — Teemu
– Teemu, Commented Feb 8, 2018 at 14:55
@Teemu Has nothing to do with document.write..... A normal string would have the same issue. — epascarello
– epascarello, Commented Feb 8, 2018 at 14:55

Denys Séguret · Accepted Answer · 2018-02-08 15:02:09Z

3

The problem is with your "</script>": it ends the script element in which it is embedded (hence the "unterminated template literal").

A solution is to write it in another form, for example

`</` + "script>"

or

let htmlStr = `<script>${ testStr }</${"script"}>`;

or

let htmlStr = `<script>${ testStr }</\script>`;

(any other construct not containing "</script>" would be fine).

This isn't about templates or strings: this is read when the HTML page is read, long before the javascript is even parsed.

edited Feb 8, 2018 at 15:02

answered Feb 8, 2018 at 14:51

Denys Séguret

384k90 gold badges813 silver badges780 bronze badges

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

7 Comments

JavaRunner Over a year ago

But why does it work with the: <div>${ testStr }</div>? It's also unescaped.

user202729 Over a year ago

Because HTML tags need to be matched.

Denys Séguret Over a year ago

@JavaRunner the problem is only with </script> because that's what tells the page parser where the script ends, before the script is event parsed.

epascarello Over a year ago

So why not give a solution for a template literal instead of telling them they have to use ""?

Denys Séguret Over a year ago

@epascarello because it's painful to write template literals in SO answers... But I'll try

|

Charlie · Accepted Answer · 2018-02-08 14:55:12Z

0

Closing script tags should be escaped.

let htmlStr = `<script>${ testStr }<\/script>`;

would work

edited Feb 8, 2018 at 14:55

answered Feb 8, 2018 at 14:52

Charlie

2763 silver badges14 bronze badges

2 Comments

Denys Séguret Over a year ago

Not really. Just the </script> because it is read before he Javascript is even parsed.

Charlie Over a year ago

Yeah, I did mean to say closing script tags. Good spot. I see you answered just before me anyway so they have the answer.

Collectives™ on Stack Overflow

Javascript multiline string issue

2 Answers 2

7 Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

7 Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related