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

Question

在不使用任何模板引擎的情况下，我经常写这样的东西

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

  }
}

如果我想要的 html 很大，很难阅读，有什么方法可以在我上面的例子中保持缩进？

Answer 1

您可以使用反引号来定义多行字符串:

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

这是工作 demo .

请注意，它是 ECMAScript 6 标准的一部分，可能无法在某些浏览器中运行:
ES6 Template Strings compatibility table