The right way to style multi line string with html content in Javascript?

Question

I'm working with JavaScript code where I need to create a menu structure. I'm using an append statement and adding code for each topic, with a list of sub topics in it for the script to render the whole thing as a menu. This works fine if I don't space out the tags in the string but I want it to look cleaner for debugging and editing purposes.

sidebarMainMenu.append('\
    <li id="par-1-menu"><a href="topic1.html">MainTopic-1</a>\
        <ul class="sub-menu">\
            <li id="sub-par-1-1-menu"><a href="topic1.html#sub-par-1-1">#1: SubTopic-1</a></li>\
            <li id="sub-par-1-2-menu"><a href="topic1.html#sub-par-1-2">#2: SubTopic-2</a></li>\
            <li id="sub-par-1-3-menu"><a href="topic1.html#sub-par-1-3">#3: SubTopic-3</a></li>\
            <li id="sub-par-1-4-menu"><a href="topic1.html#sub-par-1-4">#4: SubTopic-4</a></li>\
            <li id="sub-par-1-5-menu"><a href="topic1.html#sub-par-1-5">#5: SubTopic-5</a></li>\
            <li id="sub-par-1-6-menu"><a href="topic1.html#sub-par-1-6">#6: SubTopic-6</a></li>\
        </ul>\
    </li>\
');

This gives me the error: Uncaught SyntaxError: Unexpected token ILLEGAL

Not sure what I missed here but I'm certain it's a minor mistake. Regardless, is this even the right approach to handling multi-line string arguments in JS functions? Thanks in advance.

BTW, I just try your code in console & codepen, and there was not any error, are you sure the error is for this block of code? — Mehdi Dehghani, Apr 11 '16 at 18:31
Possible duplicate of [Javascript Multi-line string and Unexpected Token ILLEGAL](http://stackoverflow.com/questions/12115276/javascript-multi-line-string-and-unexpected-token-illegal) — Sam Hanley, Apr 11 '16 at 18:38

Sam Hanley · Accepted Answer · 2016-04-11T18:45:36.747

2

That is not the preferred way to do multi-line strings in JavaScript. As per the MDN article on Template Literals, there's two ways, either using standard strings or (in browsers which support them) using the newer template literals syntax.

First, here's the MDN example on how to use a multi-line string literal with plain JavaScript strings:

Using normal strings, you would have to use the following syntax in order to get multi-line strings:
console.log("string text line 1\n"+
"string text line 2");
// "string text line 1
// string text line 2"

Essentially, you're just writing each line as a string and concatenating them with the + operator. However, with ECMAScript 2015, there's a new way to do this (notice the backticks rather than quotes):

To get the same effect with multi-line strings, you can now write:
console.log(`string text line 1
string text line 2`);
// "string text line 1
// string text line 2"

Note that template literals are only supported in some newer browsers, you can check the table at the bottom of the linked article for details on support.

edited Apr 11 '16 at 18:45

answered Apr 11 '16 at 18:31

Sam Hanley

4,707
7
35
63

1

I was going to create a demo and post the answer, here is a fiddle utilizing the back ticks. https://jsfiddle.net/e3o8rm7g/ – Devnsyde Apr 11 '16 at 18:36
I did this. I even tried creating a JSON object and using each line of the string in the object. Neither worked. I think I've got a formatting issue in the code above. – Darth Coder Apr 11 '16 at 18:37
1

I've amended my answer to say this isn't the ***preferred*** way to do multi-line strings, because as I just learned, apparently you can actually do this and escape all newline or carriage return characters. However, as you're seeing - it's a mess and isn't what I'd recommend. If you want to use this format, though as others have said, make sure there's no whitespace after any of your backslashes. – Sam Hanley Apr 11 '16 at 18:39
The code illustrated in the jsfiddle gives me an "Uncaught SyntaxError: Unexpected end of input" error. – Darth Coder Apr 11 '16 at 18:53
@DarthCoder, are you running a browser which does not support template literals? I didn't create that fiddle, but it works fine for me in Google Chrome. – Sam Hanley Apr 11 '16 at 18:54
No I was using Chrome. The error was something else. I'm almost embarrassed. But it was good to see the alternate methods of getting this done. Thanks everyone :) – Darth Coder Apr 11 '16 at 18:59

score 0 · Answer 2 · answered Apr 11 '16 at 18:32

copy/pasting that string to the console gives no error.

your question is more of an opinion rather than a right/wrong. One might argue that you should never put html strings in javascript, but they would be a purist and not work in the real world.

Another might argue that you should break down you strings and do loops.

Still another might argue that you should put the markup in the page somewhere and reference it via javascript to put it where you want.

And another might argue that you should use a template language and populate the template with data in the javascript.

score 0 · Answer 3 · answered Apr 11 '16 at 18:34

0

Its the first line, after opening the quote you have a backslash and no content, if you moved your first li tag up there it will work.

answered Apr 11 '16 at 18:34

Stuart

6,630
2
24
40

The right way to style multi line string with html content in Javascript?

3 Answers3