在javascript中使用HTML保留缩进格式

没有使用任何模板引擎，我经常写这样的东西

success(data) {
  var html = '';
  if (data) {
    $.each(data.result, function() {
      html += '<button type="button" class="btn btn-navbar" data toggle="collapse" data-target=".nav-collapse">'
      html += '<span class="icon-bar"></span>'
      html += '<span class="icon-bar"></span>'
      html += '<span class="icon-bar"></span>'
      html += '</button>'
    });
    $('something').append(html);

  }
}

成功（数据）{
var html=''；
如果（数据）{
$.each（data.result，function（）{
html+=''
html+=''
html+=''
html+=''
html+=''
});
$（'something'）.append（html）；
}
}

---

如果我想要的html太大，很难阅读，有没有办法在我上面的例子中保留缩进？

您可以使用倒勾来定义多行字符串：

var buttonTemplate = `<button type="button" class="btn btn-navbar" data toggle="collapse" data-target=".nav-collapse">
    <span class="icon-bar"></span>
    <span class="icon-bar"></span>
    <span class="icon-bar"></span>
</button>`;

if (data) {
  $.each(data.result, function() {
    $(buttonTemplate).appendTo('#something');
  });
}

var buttonemplate=`
`;
如果（数据）{
$.each（data.result，function（）{
$（buttonTemplate）；
});
}

这是工作表

注意它是ECMAScript 6标准的一部分，在某些浏览器中可能无法工作：

---

您可以在一个易于处理的数组中创建和存储模板。您还可以存储多个模板并协调使用

Templates = {};
Templates.temp = [
    `<button type="button" class="btn btn-navbar" data toggle="collapse" data-target=".nav-collapse">
    <span class="icon-bar"></span>
    <span class="icon-bar"></span>
    <span class="icon-bar"></span>
</button>`
].join("\n");

if (data) {
  $.each(data.result, function() {
   $('#something').append($(Templates.temp));  // into jQuery object
  });
}

Templates={}；
Templates.temp=[
`
`
].加入（“\n”）；
如果（数据）{
$.each（data.result，function（）{
$（'#something'）。将（$（Templates.temp））；//追加到jQuery对象中
});
}

---

注意：“in join（“\n”）不同于html中的单引号连接（“\n”）

将模板保存在脚本标记中，类型为

text/template

（任何类型不等于

text/javascript

，浏览器将忽略）

---

只需根据需要在+=后面添加空格？我与您有保存问题，我同意@nnnnnn。每当我动态构建html时，我通常会在字符串前面附加“\n”和“\t”，这在呈现时似乎效果很好。不过，后端是个大麻烦。你是否在开发工具中“阅读”源代码？例如，Chrome默认设置html格式，因此不需要手动缩进。

<script type="text/template" id="btnTpl">
<button type="button" class="btn btn-navbar" data toggle="collapse" data-target=".nav-collapse">
    <span class="icon-bar"></span>
    <span class="icon-bar"></span>
    <span class="icon-bar"></span>
</button>
</script>

var buttonTpl = $('#btnTpl').html();
if (data) {
  $.each(data.result, function() {
    $(buttonTpl).appendTo('#something');
  });
}