Template literals (Template strings) not working on IE

Question

I've had somebody doing this piece of code for me. It works perfectly on all browser. Except, of course, Internet Explorer. I've read about template literals and the problem with backticks and IE, but I'm not entirely sure on how to implement a solution to my case. Here's the code:

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

Template literals

Template literals can contain placeholders. These are indicated by the dollar sign and curly braces. ${expression} .

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

Your string should look like this:

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>`

For IE support it's better to use "blabla" + something + "bla"