7

如何在Template literal中调用函数。

以下尝试中的函数语法显示在 HTML 中：

function readURL(input) {
    if (input.files && input.files[0]) {
        var reader = new FileReader();

        var html = `
        <div class="row">
        ${reader.onload = function (e) {
            $('#image_upload_preview').attr('src', e.target.result);
        }}
        <img id="image_upload_preview" src="http://placehold.it/100x100" alt="your image" />
        </div>
        `;

        $("#test").append(html);

        reader.readAsDataURL(input.files[0]);
    }
}

$("#multi-file").change(function () {
    readURL(this);
});

谢谢大家。

4

2 回答 2

10

如果我正确理解你的问题，你想在模板文字中定义和调用函数。

一些背景：

您可以在模板文字中执行表达式，如下所示：

function fun(){
   return 5
}

var someLit=`some function got a value ${fun()}`

所以这是文字内部函数的最简单和最好的用法。现在您在示例中尝试做的是，评估表达式

reader.onload = function (e) {
  $('#image_upload_preview').attr('src', e.target.result);
}

在模板文字中， this 绑定和事件用于 onload，但返回的值reader.onload被替换在模板文字内的该位置。

你会function(){...在输出中看到。

如果您不想在输出中看到该函数声明，您可以立即调用该函数。

例子：

   (reader.onload = function (e) {
      $('#image_upload_preview').attr('src', e.target.result);
   })();

这将在表达式的位置返回 undefined。现在，如果你想避免这种情况undefined，你可以从你的函数中返回一些空字符串。

  (reader.onload = function (e) {
      $('#image_upload_preview').attr('src', e.target.result);
      return '';
   })();

现在，由于您已将此函数用作事件的回调，因此立即调用该函数可能无济于事（因为您不会在那里获得 e 参数）。

因此，您可以将事件绑定到另一个函数中，例如：

(function(){
    reader.onload = function (e) {
          $('#image_upload_preview').attr('src', e.target.result);
       }
    return '';
})();

这将声明该函数，该函数绑定到您的onload事件，并且不会在您的模板文字中留下痕迹。

笔记：

简单地在模板文字之外声明函数并在文字内调用它是最好的选择

于 2016-06-22T09:15:27.277 回答
5

这就是您可以在模板文字中调用函数的方式.. 

function something() { 
    return "better than nothing"; 
}
console.log(`Something is ${something()}.`);
//=> Something is better than nothing.
于 2016-06-22T09:17:02.617 回答