如何调用模板文字内的调用函数 [英] How to call calling a function inside a 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）; 
}} 
 < / div> 
`; 
 
 $（＃test）。append（html）; 
 
 reader.readAsDataURL（input.files [0]）; 
 
 
 $ b $（＃multi-file）。change（function（）{
 readURL（this）; 
}）; 
  

预先感谢您。

解决方案

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

一些背景：：

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

 函数fun（）{
 return 5 
} 
 
 var someLit =`一些函数有一个值$ {fun（）}`
  

所以这是函数内部最简单和最好的用法。现在你在你的例子中试图做的是评估表达式

  reader.onload = function（e）{
 $（'＃image_upload_preview'）。attr（'src'，e.target.result）; 
} 
  

在模板文字中，这个绑定和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 事件并且不会在模板文字中留下痕迹。

注意：

只需在模板文字外面声明函数，并在任何需要的地方调用它就是最好的选择。

How can I go about calling a function inside a Template literal.

The function syntax in the attempt below shows in the 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);
});

Thank you all in advance.

解决方案

If I understand your question correctly, you want to define and invoke the function inside the template literal.

Some background:

You can execute an expression in the template literal as follows:

function fun(){
   return 5
}

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

So this is the simplest and best usage of a function inside literal. Now what you are trying to do in your example is, evaluate the expression

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

inside the template literal, this binds and event for onload, but the returned value for reader.onload is replaced in that position inside the template literal.

and you see function(){... in the output.

If you don't want to see that function declaration in the output you can immediately invoke the function.

Example:

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

This will return undefined in the place of the expression. Now if you want to avoid that undefined, you can return some empty string from your function.

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

Now, as you have used this function as an callback for event, immediately invoking the function might not help(as you will not get the e parameter there).

So you can bind the event inside another function like:

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

this will declare the function, which is bind to your onload event and would not leave a trace in your template literal.

Note:

Simply declaring the function outside the template literal and calling it inside literal wherever you want is the best option

这篇关于如何调用模板文字内的调用函数的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！