模板文字（模板字符串）不适用于 IE

Question

我已经有人为我做了这段代码。 它在所有浏览器上都能完美运行。 当然，Internet Explorer 除外。 我已经阅读了模板文字以及反引号和 IE 的问题，但我不完全确定如何为我的案例实施解决方案。 这是代码：

var products = JSON.parse(localStorage.getItem("products"));
var i = 0;
var html = "";
$.each(products, function(index, val) {
console.log(val);
 var img_quo = val.img;
var new_img = img_quo.substring(1, img_quo.length);

html += `<div style="width: 100%;margin: 0px;text-align: center;display: block;padding-bottom: 0px;float: left;" id="item_div_`+i+`">
<div class="input_fields_wrap_`+i+`"     style="background: #EDEDED;    display: inline-block;    border-radius: 45px;    width: 92%;    padding: 15px 20px;     margin: 0 0 8px;">

<div id="img-block">
<a href="/ProductDetails.asp?ProductCode=`+decodeURIComponent(val.product_code)+`"><img src="`+new_img+`" alt="item" height="auto" width="auto"></a>
</div>

<div id="input-block-half" style="display:none;">
<input class="input-field" name="Item Number" value="`+decodeURIComponent(val.product_code)+`" type="text" required=""></div>

<div id="input-block">
<input class="input-field" name="Item Name" value="`+val.name+`" type="text"></div>

<div id="input-block-price">
<input class="input-field" name="Item Price" value="`+$.trim(val.price)+`" type="text" readonly></div>

<div id="input-block-qty">
<input class="input-field-qty" name="Quantity" value="`+val.qty+`" type="number" required=""></div>

<div id="input-block-remove">
<span class="input-text" onclick="removeItem(`+i+`,'`+decodeURIComponent(val.product_code)+`')"><img src="https://i.imgur.com/IAB7ZrK.png" style="margin-top: 11px; cursor:pointer;"></span></div>
</div>`;
i++;
});
$('.input_fields_wrap').html(html);

Answer 1

模板文字

模板文字可以包含占位符。 这些由美元符号和花括号表示。 ${expression} 。

 let a = 'Hello'; let b = 'world' let c = new Date(); console.log(`${a} ${b} right now is ${c}`);

您的字符串应如下所示：

let strg = `<div style="width: 100%;margin: 0px;text-align: center;display: block;padding-bottom: 0px;float: left;" id="item_div_${i}">
    <div class="input_fields_wrap_${i}" style="background: #EDEDED; display: inline-block; border-radius: 45px; width: 92%; padding: 15px 20px; margin: 0 0 8px;">

    <div id="img-block">
    <a href="/ProductDetails.asp?ProductCode=${decodeURIComponent(val.product_code)}"><img src="${new_img}" alt="item" height="auto" width="auto"></a>
    </div>

    <div id="input-block-half" style="display:none;">
    <input class="input-field" name="Item Number" value="${decodeURIComponent(val.product_code)}" type="text" required=""></div>

    <div id="input-block">
    <input class="input-field" name="Item Name" value="${val.name}" type="text"></div>

    <div id="input-block-price">
    <input class="input-field" name="Item Price" value="${$.trim(val.price)}" type="text" readonly></div>

    <div id="input-block-qty">
    <input class="input-field-qty" name="Quantity" value="${val.qty}" type="number" required=""></div>

    <div id="input-block-remove">
    <span class="input-text" onclick="removeItem(${i}, '${decodeURIComponent(val.product_code)}')"><img src="https://i.imgur.com/IAB7ZrK.png" style="margin-top: 11px; cursor:pointer;"></span></div>
    </div>`

对于IE支持，最好使用"blabla" + something + "bla"