将html转换为js，并且其中含有判断语句

Question

一个layui框架的前端页面，希望将如下的代码转换为js

<script id="goodsDemo" type="text/html">
        {{#  layui.each(d, function(index, item){ }}
        <li>
          <div class="layui-row">
            <div class="layui-col-md1">
                <input name="like" lay-skin="primary" id={{item.id}} lay-filter="number" type="checkbox" />
                {{#if (item.imgUrl) { }}
                    <img src={{item.imgUrl}} data={{item.imgUrl}} style="width: 100px;height: 100px;">
                {{# }else{ }}
                    <p class="noimg">暂无图片</p>
                {{# } }}
            </div>
            <div class="layui-col-md7">
                <h3>{{item.name}}</h3>
              <p class="disTableCell starName">
                <span>SKU: <i>{{item.sku}}</i></span>
                <span>供应商: <i>{{item.supplierName}}</i></span>
              </p>
              <p class="disTableCell starName">
                <!-- <span>市场价: <i>￥{{item.price}}</i></span> -->
                <span>价格: <i style="color:#ff0201;font-weight: 700;">￥{{item.price}}</i></span>
                <span>上市时间: <i>{{item.createTime}}</i></span>
              </p>
              <!-- <p class="disTableCell starName">
              </p> -->
            </div>
            <div class="layui-col-md2">
              <button type="button" class="layui-btn" id={{item.sku}} style="border-radius:8px;margin-top:20px;">添加</button>
            </div>
          </div>
        </li>
        {{#  }); }}
    </script>

如下这样str拼接完之后，innerhtml渲染到ul中，可是不知道怎么在里面判断了，像是上面有一个对于imgurl的判断，想请教一下如何增加进去，谢谢

for (var i = 0; i < data.length; i++) {
            str+='<li>' +
                '<div class="layui-row">' +
                '<div class="layui-col-md1">' +
                '<input name="like" lay-skin="primary" id="'+data[i].id+'" lay-filter="number" type="checkbox" />' +....
                document.getElementById('goodsView').innerHTML = str;
}

Answer 1

用三元运算

item.imgUrl ? '<img src="+data[i]+"':'<p class="noimg">暂无图片</p>'

字符模板拼接：

`${data[i].imgUrl?`<img src="${data[i].imgUrl}" data="${data[i].imgUrl}" style="width: 100px;height: 100px;">`:'<p class="noimg">暂无图片</p>'}`