Question

我想知道这是否可行，如果是这样，我有一个很长的字符串，为了可维护性和可读性，我想把新行放到代码中，如下所示：

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

我不希望这些新行出现在HTML输出中。

然而，这会返回SyntaxError: Unexpected EOF。

有没有这样做？

Answer 1

只需在断开每一行之前添加一个反斜杠：

var str = "sfdsadadadas\
           asdasdasdasdasd\
           sdfsdfsfsd";

请注意，每个反斜杠与下一行上的（缩进）内容之间的空格将成为字符串的一部分。这不应该是HTML输出的问题，除非您使用预格式化的文本（例如<pre>标签中的内容）。

Answer 2

不，字符串不能包含未转义的换行符，只能包含行连续符，这意味着您可以在输出字符串中获得缩进的空格。规范的执行部分是section 7.8.4：

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

“但不是......或LineTerminator”部分表示字符串不能包含换行符，但“| LineContinuation”表示\ ＆lt; LineTerminator＆gt; 正常。读入 LineContinuation 的字符串值表明它不会对引用的字符串作为一个整体的字符串值做出贡献，也不会占用任何前导空格。

你可以做到

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

使每一行成为数组中的元素，并加入空字符串。

如果您稍后更改代码以执行比+更复杂的数字操作，这还有助于避免数字运算符与用于字符串连接的-left之间的混淆。

Answer 3

修改后的代码：。

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

或者你可以获得数组的帮助

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

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

Answer 4

我认为问题是由于使用'（单引号）并在其中使用"（双引号）。所以我试图逃避你的报价，如此：

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

P.S。请注意使用+运算符，它非常有用并且可以保证数据在下一行没有变化，否则可能有回车或空格。

Answer 5

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

javascript将回车符添加到字符串中以便于阅读

5 个答案: