我的基于数组的字符串连接版本：

var c = []; //c stands for content
c.push("<div id='thisDiv' style='left:10px'></div>");
c.push("<div onclick='showDo(\'something\');'></div>");
$(body).append(c.join('\n'));

这对我来说效果很好，尤其是当我经常将值插入到以这种方式构建的html中时。但它有很多局限性。缩进会很好。不用处理嵌套的引号真的很好，只是它的笨重让我很困扰。

要添加到数组中的.push（）是否占用了大量时间？请参阅此相关答案：

（JavaScript开发人员不使用Array.push（）有什么原因吗？）

在查看了这些（相反的）测试运行之后，看起来.push（）对于不太可能增长超过100个项目的字符串数组是很好的-我将避免使用它，而支持对较大数组进行索引加法。

如果恰好在Node中运行，则可以使用fs模块从文件中读入多行字符串：

var diagram;
var fs = require('fs');
fs.readFile( __dirname + '/diagram.txt', function (err, data) {
  if (err) {
    throw err; 
  }
  diagram = data.toString();
});

实现这一点有多种方法

1.斜线拼接

  var MultiLine=  '1\
    2\
    3\
    4\
    5\
    6\
    7\
    8\
    9';

2.规则串联

var MultiLine = '1'
+'2'
+'3'
+'4'
+'5';

3.数组连接串联

var MultiLine = [
'1',
'2',
'3',
'4',
'5'
].join('');

就性能而言，斜杠串联（第一个）是最快的。

有关性能的更多详细信息，请参阅本测试用例

更新：

使用ES2015，我们可以利用其模板字符串功能。有了它，我们只需要使用反引号来创建多行字符串

例子：

 `<h1>{{title}}</h1>
  <h2>{{hero.name}} details!</h2>
  <div><label>id: </label>{{hero.id}}</div>
  <div><label>name: </label>{{hero.name}}</div>
  `

我这样编程：

sys = {
    layout: null,
    makeLayout: function (obCLS) {
        this.layout = $('<div />').addClass('editor').appendTo($(obCLS)).append(

            /* Cargador */
            /* @this.layout.find('> div:nth-of-child(1)'); */
            '<div>' +
            '   <p>Seleccione la imagen que desea procesar.</p>' +
            '   <input type="button" value="Seleccionar" class="btn btn-xlarge btn-success" />' +
            '   <span></span>' +
            '</div>' +

            /* Cargador - Progreso */
            /* @this.layout.find('> div:nth-of-child(2)'); */
            '<div>' +
            '   <div>' +
            '       <div></div>' +
            '       <div>' +
            '           <div></div>' +
            '       </div>' +
            '   </div>' +
            '</div>' +

            /* Editor */
            /* @this.layout.find('> div:nth-of-child(3)');
             * @sidebar = this.layout.find('> div:nth-of-child(3) > div > div > div:nth-of-type(1)');
             * @body    = this.layout.find('> div:nth-of-child(3) > div > div > div:nth-of-type(2) > div'); */
            '<div>' +
            '   <div>' +
            '       <div>' +
            '           <div></div>' +
            '           <div>' +
            '               <div></div>' +
            '           </div>' +
            '       </div>' +
            '   </div>' +
            '</div>'
        );
    }
}

sys.makeLayout('#div');

你可以这样做。。。

var string = 'This is\n' +
'a multiline\n' + 
'string';

2015年更新：现在已经过了六年：大多数人使用模块加载器，主要模块系统都有加载模板的方法。它不是内联的，但最常见的多行字符串类型是模板，无论如何，模板应该被排除在JS之外。

require.js：'需要文本'。

使用require.js“text”插件，在template.html中使用多行模板

var template = require('text!template.html')

NPM/browserify:“brfs”模块

Browserify使用“brfs”模块加载文本文件。这实际上会将模板构建到捆绑的HTML中。

var fs = require("fs");
var template = fs.readFileSync(template.html', 'utf8');

容易的