javascript - iOS safari 上带有模板字符串文字的语法错误

Question

我在使用模板字符串文字时遇到问题。该代码在 Chrome、Firefox、Edge 上完美运行，但无法在 Safari 上执行。

这是我用来插入外部 HTML 模板的插入字符串扩展。

这是babel编译后无法正确执行的代码

是否有任何有效的 polyfill 可以解决 Safari 浏览器上的这个错误？或者重写此插入字符串扩展以使用普通旧字符串文字的方法？

Answer 1

解决了。

显然，当使用 html-loader 从 html 模板导入时，粗箭头函数 song => { ... } 没有被转译。将其更改为良好的旧 function(song) { return... } 样式语法并且它有效。丑陋但工作。希望也能找到一种从 html 模板转换 es6 的方法。

<!--${songs.map(song => `-->
${songs.map(function(song) { return `
<div data-menuanchor="${song.anchor}" class="node song">
    <div class="label">${song.number}</div>
    <div class="timer"></div>
    <div class="line">
        <div class="lineProgress"></div>
        <div class="lineDefault"></div>
    </div>
    <a href="#${song.anchor}" class="link">
        <div class="linkDefault"></div>
        <div class="linkHover"></div>
        <div class="linkBass rythm-medium"></div>
    </a>
    <div class="actions">
        <div class="playBtn"><i class="icon bg-play"></i></div>
        <div class="pauseBtn"><i class="icon bg-pause"></i></div>
    </div>
</div>
`}).join('')}
<!--`).join('')}-->