将ES6箭头功能转换为ES5

Question

我找到了可以在我正在工作的Leaflet项目中使用的功能。该函数是用ES6编写的，在Firefox和Chrome中都可以很好地工作。但是，我也需要定位IE。在我的研究中，我发现IE目前不接受ES6箭头功能。我还发现，如果将ES6函数转换为ES5，该函数将在IE中工作。几天来，我试图将以下功能转换为ES5，但没有成功。我尝试过的一些解决方案在此处发布。可以请一些人看看我的剧本，让我知道我在做什么错。同样，ES6的好处是什么？较短的脚本？先感谢您。

这是有效的ES6脚本：

points.map((p, i) => L.marker(p).bindPopup(`marker${'<strong>' + pointData[i].cityName + '</strong>' + ', ' + '</br>'  + pointData[i].discrip +  "<br /><a class='fancybox-thumb' ' style='width:150px;' rel='fancybox-button'  rel='fancybox-thumb'   data-fancybox-group='"+ pointData[i].popup +"'   title='" + pointData[i].discrip + " '  href='graphic/"+ pointData[i].popup + "' ><img src='graphic/" + pointData[i].popup + "' alt='Image' ' style='width:150px;' ></a>" + "<br/><a href='http://www.google.com'  target='_blank'>Cedellion Report</a>"}`))
.forEach(function(marker) {
    map.addLayer(marker);
    oms.addMarker(marker);
});

这是我最好的尝试/猜测，没有喜悦。

points.map(function(p, i) {
L.marker(p).bindPopup(`marker${'<strong>' + pointData[i].cityName + '</strong>' + ', ' + '</br>'  + pointData[i].discrip +  "<br /><a class='fancybox-thumb' ' style='width:150px;' rel='fancybox-button'  rel='fancybox-thumb'   data-fancybox-group='"+ pointData[i].popup +"'   title='" + pointData[i].discrip + " '  href='graphic/"+ pointData[i].popup + "' ><img src='graphic/" + pointData[i].popup + "' alt='Image' ' style='width:150px;' ></a>" + "<br/><a href='http://www.google.com'  target='_blank'>Cedellion Report</a>"}`)})
.forEach(function(marker) {
map.addLayer(marker);
oms.addMarker(marker);
});

Answer 1

当你有ES6 +代码，您想为ES5使兼容，以transpile的语法，你可以像transpiler自动执行巴贝尔。插入代码可得到以下结果：

points.map(function (p, i) {
  return L.marker(p).bindPopup("marker" + ('<strong>' + pointData[i].cityName + '</strong>' + ', ' + '</br>' + pointData[i].discrip + "<br /><a class='fancybox-thumb' ' style='width:150px;' rel='fancybox-button'  rel='fancybox-thumb'   data-fancybox-group='" + pointData[i].popup + "'   title='" + pointData[i].discrip + " '  href='graphic/" + pointData[i].popup + "' ><img src='graphic/" + pointData[i].popup + "' alt='Image' ' style='width:150px;' ></a>" + "<br/><a href='http://www.google.com'  target='_blank'>Cedellion Report</a>"));
}).forEach(function (marker) {
  map.addLayer(marker);
  oms.addMarker(marker);
});

您还需要转换模板文字-声明字符串并与之连接，+而不是使用${}语法。另外，你需要return在L.marker...从.map回调。

请注意，这仅转换语法，而不转换方法-如果您使用的是ES6 +方法（例如Array.prototype.includes），那么Babel不够用-您需要手动更改代码以使用ES5方法（例如indexOf），或者，一个更好的选择，包括一个polyfill（示例），以在查看您页面的客户端上定义ES6 +方法。