Invalid or unexpected token with multiline string

Question

I'm trying to return an HTML string out from a function in my JavaScript code, but on the console I get the error "Uncaught syntax error: invalid or unexpected token" with the following code

function formatPrize (prize) {
    return (
     /*Unexpected token here*/ '<div class = "wrapper">
            <div class = "card radius shadowDepth1">
                <div class ="card__image border-tlr-radius">
                    <img src = "admin/"'+prize.sponsorLogo+'"> alt = "image" class = "border-tlr-radius">
                </div>

                <div class = "card_content card_padding">
                    <div class = "card_meta">
                        <h3>"'+prize.name+'"</h3>
                    </div>

                    <article class = "card__article">
                        Test message
                    </article>
                </div>
            </div>
        </div>'
    );
}

I basically replaced some other piece of code that was here before and worked:

"<tr>" +
    "<td>" + prize.name + "</td>" +
    "<td>$" + prize.value + "</td>" +
    "<td>" + prize.description + "</td>" +
"</tr>"

Did I did something wrong when replacing that? How can I fix it?

score 8 · Answer 1 · edited May 23 '17 at 11:53

8

The problem is that single quotes and double quotes cannot create multiline strings in JavaScript.

As an alternative, either make each line a separate string and concatenate them, or do the following:

To have a multiline string, you need to replace the single quotes (') with a backtick (`) in JavaScript — this may be causing the error.

^{^{As @noazark pointed out, this may have limited compatibility because it came with ES6, which is still relatively new.}}

You can also escape the newline with a backslash at the end of each line.

See this SO answer for more details on the previous two methods.

edited May 23 '17 at 11:53

Community

1
1

answered Jul 12 '16 at 23:48

Jonathan Lam

16,831
17
68
94

Template strings, ```, are part of the ES2015/ES6 update to JavaScript, and they are not supported in many browsers. – noazark Jul 12 '16 at 23:52
1

@noazark and due to that let's use the ancient standards for 20 years more! – zerkms Jul 12 '16 at 23:58
Good news though @zerkms, browsers are rapidly catching up! And don't for get about using Babel.js in development! – noazark Jul 13 '16 at 00:00
@noazark I'm targeting only latest browsers, so I don't even need babel in most cases ;-P – zerkms Jul 13 '16 at 00:02

score 4 · Accepted Answer · answered Jul 12 '16 at 23:50

You have to escape the newline character (with \) or concatenate multiple lines (both shown below).

function formatPrize (prize) {
return '<div class = "wrapper"> \
        <div class = "card radius shadowDepth1"> \
            <div class ="card__image border-tlr-radius"> \
                <img src = "admin/"'+prize.sponsorLogo+'"> alt = "image" class = "border-tlr-radius"> \
            </div>' +
            '<div class = "card_content card_padding">\n' +
                '<div class = "card_meta">\n' +
                    '<h3>"'+prize.name+'"</h3>\n' +
                '</div>\n' +
                ' \n' +
                '<article class = "card__article"> \
                    Test message \
                </article> \
            </div> \
        </div> \
    </div>';
}

noazark · Answer 3 · 2016-07-12T23:56:47.337

1

Unfortunately most browsers do not support multi-line strings in javascript. You can do something like this though:

[
  "<tr>",
      "<td>" + prize.name + "</td>",
      "<td>$" + prize.value + "</td>",
      "<td>" + prize.description + "</td>",
  "</tr>"
].join('')

Edit The original version you provided works because the + operator looks for the next string, and since JavaScript is not whitespace sensitive, you can place it on the next line without any issues. So specifically your change was replacing the addition sign (string concatenation) with a multi-line string (which is not supported).

edited Jul 12 '16 at 23:56

answered Jul 12 '16 at 23:50

noazark

289
6
23

"most browsers do not support" --- what does it mean in numbers? http://kangax.github.io/compat-table/es6/#test-template_strings --- from this table I see that *most* browsers support it. – zerkms Jul 13 '16 at 00:02
1

That table is filled up with many non-browsers, and intentionally does not include any "popular" (another relative term) browsers that are actively in use, but will not _ever_ receive those features listed. So sure, most edge versions of all the popular browsers support template literals, but that's not something I usually consider in conversation. – noazark Jul 13 '16 at 00:13
Great link though! And thank you for putting in! Another worthwhile link, for those interested is: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Template_literals – noazark Jul 13 '16 at 00:14
"So sure, most edge versions of all the popular browsers support template literals, but that's not something I usually consider in conversation." --- that's why I asked numbers (and probably their source) :-) Everyone has different audience, so "most" is different for everyone thus looks misleading. – zerkms Jul 13 '16 at 00:20

Invalid or unexpected token with multiline string

3 Answers3