I found that the ES6 code map() and `` do not work in IE 11. How can I rewrite this part of the code cross-browser or what polyfill can I use for this?

 jQuery.noConflict(); jQuery(document).ready(function($) { const keys = ["hard", "soft"]; document.head.appendChild((style => { style.textContent = keys.map(key => ` #main-slider-wrapper .slider-key button[data-key="${key}"] { background-image: url(img/${key}-key-slider.png) } #main-slider-wrapper[data-key="${key}"] .slider img[src*="${key}-key"] { opacity: 1; } #main-slider-wrapper[data-key="${key}"] .slider-key button[data-key="${key}"] { filter: drop-shadow(0 0 0.5em #009af7) drop-shadow(0 0 0.2em rgba(255,255,255,0.5)); -webkit-filter: drop-shadow(0 0 0.5em #009af7) drop-shadow(0 0 0.2em rgba(255,255,255,0.5)); } `).join("\n\n"); return style; })(document.createElement("style"))); document.addEventListener("click", ({ target }) => { if (!target.matches( `${keys.map(k => `[data-key="${k}"]`).join(", ")}, .slick-arrow` )) return; const root = target.closest("#main-slider-wrapper"); const key = target.dataset.key; const index = keys.indexOf(key); root.dataset.key = key; for (const arrow of root.querySelectorAll(".slick-arrow")) { arrow.dataset.key = keys[ (keys.length + ( arrow.classList.contains("left") ? -1 : 1 ) + index) % keys.length ]; } }); for (const e of document.querySelectorAll(`[data-key="${keys[0]}"]`)) e.click(); });

    2 answers 2

    In IE11, template strings do not work, so their use should be replaced by regular addition, for example:

     `[data-key="${k}"]`

    converted to

     '[data-key="'+k+'"]'
    • I took advantage of babeljs.io/repl But, so far, I solved the problem only partially - there were questions to this block, in particular to matches and closest - ie it says that it does not know such functions document.addEventListener("click", function (_ref) { var target = _ref.target; if (!target.matches("".concat(keys.map(function (k) { return "[data-key=\"".concat(k, "\"]"); }).join(", "), ", .slick-arrow"))) return; var root = target.closest("#main-slider-wrapper"); var key = target.dataset.key; var index = keys.indexOf(key); root.dataset.key = key; } - Vasya
    • one
      @ Vasya, and he may not really know them. You can use jQuery , there just the functions with the same name are. Or add the corresponding polyfill - Grundy
    • in theory, he should know, but shows such errors "The object does not support the property or the method" matchesSelector "and" Symbol "is not defined" - Vasya
    • one
      @ Vasya, Uses the non-standard name: msMatchesSelector for example. - Grundy

    According to the results , in order to solve the problem, I first used the online service , then added babel polyfill , since without it showed an error:

    The “symbol” is not defined in IE after using babel

    Finally, I added 2 more polyphiles: for matches and closest, and then it all worked!