javascript add carriage returns to string for readability

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?

bfavaretto · Accepted Answer · 2012-10-17 20:05:38Z

4

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).

answered Oct 17, 2012 at 20:05

bfavaretto

72k18 gold badges118 silver badges162 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Mike Samuel · Accepted Answer · 2012-10-17 22:09:40Z

3

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.

edited Oct 17, 2012 at 22:09

answered Oct 17, 2012 at 20:08

Mike Samuel

121k30 gold badges230 silver badges255 bronze badges

2 Comments

George Reith Over a year ago

Thanks it's nice to see the relevant part of the spec instead of just taking someone's word for it.

Mike Samuel Over a year ago

@GeorgeReith, You're welcome. Fyi, the next version of the language, ES.Next, will have multiline strings as a side-effect of string templates

Anoop · Accepted Answer · 2012-10-17 20:06:59Z

0

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("");

answered Oct 17, 2012 at 20:06

Anoop

23.2k10 gold badges65 silver badges79 bronze badges

Comments

ckozl · Accepted Answer · 2012-10-17 20:08:57Z

0

  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>';

answered Oct 17, 2012 at 20:08

ckozl

6,7613 gold badges35 silver badges51 bronze badges

Comments

knownasilya · Accepted Answer · 2012-10-17 20:21:14Z

0

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 component = "<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.

edited Oct 17, 2012 at 20:21

answered Oct 17, 2012 at 20:08

knownasilya

6,1614 gold badges41 silver badges59 bronze badges

Collectives™ on Stack Overflow

javascript add carriage returns to string for readability

5 Answers 5

Comments

2 Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

Comments

2 Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related