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?

Answer 1

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.