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?

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?

• javascript
• string

5 Answers 5

Just add a backslash before breaking each line:

var str = "sfdsadadadas\
           asdasdasdasdasd\
           sdfsdfsfsd";

Keep in mind that the space between each backslash and the (indented) content on the next line will be part of the string. That shouldn't be a problem on HTML output, unless you're using preformatted text (like content in <pre> tags).

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 plex numeric operations than just -left.

Modified code:.

slices +=       '<div'+
            'class="'+settings.sliceClass+'"'+
            .....

or you can teke help of array

 var temp = [
            '<div',
             'class="'+settings.sliceClass+'"',
            ...

           '</img></div>'
  ];
slices  += temp.join("");

  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;' +
        '" />' +
      '</div>';

I think the problem is due to using ' (single-quotes) and having " (double-quotes) inside those. So I'd try to escape your quotes likes so:

var ponent = "<div class=\"rounded-border\">" +
    "<p>Sample Content here " + dynamicValue + "</p>" +
    "</div>";

p.s. Notice the use of the + operator, which is very useful and guarantees that the data is unchanged on the next line, otherwise there might be carriage returns or spaces.