将ES6箭头功能转换为ES5 [英] Convert ES6 Arrow Function to ES5

问题描述

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

I found a function I can use in a Leaflet project I’m working. The function is written is ES6 and it works great in both Firefox and Chrome. However, I need to target IE as well. In my research I found IE at present don't accept the ES6 Arrow function. I also I found if the ES6 function was converted to ES5, the function will work in IE. For days now I tried to convert the following function to ES5 but to no prevail. Some of the solutions I tried were found posted here. Can some please look at my script and let me know what I’m doing wrong. Also, what is the benefit of ES6 anyway; shorter script? Thank you in advance.

这是有效的ES6脚本:

Here’s the working ES6 script:

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);
});

这是我最大的尝试/猜测，没有喜悦.

Here’s my best attempt/guess with no joy.

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);
});

推荐答案

当您拥有要与ES5兼容的ES6 +代码时，要转换语法，您可以使用像 Babel 这样的编译器.插入代码即可得到以下结果:

When you have ES6+ code that you want to make compatible for ES5, to transpile the syntax, you can do it automatically with a transpiler like Babel. Plugging in your code gives this result:

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);
});

您还需要转换模板文字-声明字符串并使用 + 进行连接，而不是使用 $ {} 语法.另外，您还需要从 .map 回调中返回 L.marker ... .

You needed to transpile the template literal too - declare strings and concatenate with + instead of using ${} syntax. In addition, you needed to return the L.marker... from the .map callback.

请注意，这只会转换语法，而不转换方法-如果您使用的是ES6 +方法(例如， Array.prototype.includes )，Babel将不会足够-您将需要手动更改代码以使用ES5方法(例如 indexOf )，或者更好的选择是包括polyfill(

Note that this only transpiles syntax, not methods - if you're using ES6+ methods (for example, Array.prototype.includes), Babel won't be enough - you'll either need to change the code manually to use an ES5 method (like indexOf), or, a better option, include a polyfill (example) to define the ES6+ methods on clients viewing your page.

这篇关于将ES6箭头功能转换为ES5的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！