Question

I am wondering if this is possible and if so how, I have a long string and for maintainability and readability purposes I want to put newlines into the code like so:

slices += 
    '<div 
        class="'+settings.sliceClass+'"
        style="
            width:' + slicewidth + 'px;
            height:' + sliceheight + 'px;
            left:' + left + 'px;
            top:' + top + 'px;
    "><img src="'+slide.properties.src+'"
        style="
            position: relative;
            left:' + -left + 'px;
            top:' + -top + 'px;
            width:' + Math.round(slide.properties.image.width * slide.properties.scale.width) + 'px;
            height:' + Math.round(slide.properties.image.height * slide.properties.scale.height) + 'px;
    ">
    </img></div>'
);

I am not expecting these newlines to appear in the HTML output.

However this returns a SyntaxError: Unexpected EOF.

Is there anyway to do this?

Answer 1

No, strings cannot contain unescaped newlines, only line continuations, which means you get the indenting white-space in your output string. The operative part of the spec is section 7.8.4:

SingleStringCharacter ::
    SourceCharacter but not single-quote or backslash or LineTerminator
  | \ EscapeSequence
  | LineContinuation

The “but not … or LineTerminator” part means that strings cannot contain newlines, but the “| LineContinuation” means that \<LineTerminator> is OK. Reading into the string value of LineContinuation shows that it does not contribute to the string-value of the quoted string as a whole and does not eat any of the leading whitespace.

You can do

slices += 
    ['<div', 
       ' class="', settings.sliceClass, '"',
       ' style="',
     ...
    ].join('');

Make each line an element in an array, and join on the empty string.

This will also help avoid confusion between numeric operators and + used for string concatenation if you later change the code to do more complex numeric operations than just -left.