在 Javascript 中循环和返回 HTML（模板文字）答案

【问题标题】：Loop and Return HTML in Javascript (Template Literals)在 Javascript 中循环和返回 HTML（模板文字）
【发布时间】：2018-11-22 10:58:43
【问题描述】：

我正在创建一个聊天模块。一切都完成了，但我为 IE10/IE11 使用了太现代的代码，我需要这种兼容性......

我改变了很多东西，但我确信对你们来说很容易。

我需要从模板文字回到旧的方式。任何帮助？这是我需要更改的函数：data 是一个包含对象的简单数组：data = [{},{},{}]

function createChatBox(data) {
        return ` <div class="vchat__options">
            ${data.map((info, index) =>
                `${info.action === 'site' ? `<a href="${info.url}" target="_blank" id="vchat__${index}" class="vchat__box">
                <div class="vchat__block">
                    ${info.svg}
                    <p class="vchat__text"><strong class="vchat__headline">${info.headline}</strong>${info.text}</p>
                    <span class="vchat__highlight">${info.highlight}${info.highlight_icono}</span>
                </div>
                </a>` : `<div id="vchat__${info.id}" class="vchat__box ${info.action === 'next' ? 'js-vchatPanel' : 'js-vchatZopim'}">
                <div class="vchat__block">
                    ${info.svg}
                    <p class="vchat__text"><strong class="vchat__headline">${info.headline}</strong>${info.text}</p>
                    <span class="vchat__highlight">${info.highlight}${info.highlight_icono}</span>
                </div>
                </div>`}`
            ).join('')}
        </div>`;
    }

我不需要完整的代码。只是任何提示，建议都会很酷！谢谢

【问题讨论】：

嗨@Clement，你能详细说明你面临的问题是什么吗？这将帮助社区以适当的答案回复您。 :-)
嗨！请使用tour（您将获得徽章！），环顾四周，并通读help center，尤其是How do I ask a good question?，我还推荐Jon Skeet 的Writing the Perfect Question 和Question Checklist。这对于 SO 的 Q&A 格式来说太宽泛了。只需使用几个模板库中的任何一个。
@LloydFrancis 我的问题是“模板文字”不适用于 IE10/IE11，我还没有使其兼容（Babel，...）

标签： javascript html arrays object

【解决方案1】：

检查 webpack 和 Babel 以转换新的 ES6 JavaScript 语法以与旧浏览器兼容。设置完成后，您可以指定需要支持的浏览器版本等。

将您的代码示例放入online Babel compiler 以查看结果。

【讨论】：

正是我需要以这种老式方式查看我的代码！不知道为什么我没有想到这一点。谢谢！