テンプレートリテラル内で関数を呼び出す方法

Question

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

は、事前にすべてのいただきありがとうございます。

Answer 1

あなたの質問が正しく理解されている場合は、テンプレートリテラル内で関数を定義して呼び出す必要があります。次のように、リテラルテンプレートに式を実行することができます

：

いくつかの背景

function fun(){ 
    return 5 
} 

var someLit=`some function got a value ${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 ''; 
    })(); 

あなたは、イベントのコールバックとしてこの機能を使用していたとして、すぐに機能を呼び出すことは（あなたがそこに電子パラメータを取得することはありませんように）助けていない可能性があります。

だから、あなたのような別の関数内でイベントをバインドすることができます。

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

これはあなたのonloadイベントにバインドされており、文字通り、あなたのテンプレートに跡を残さないであろう、関数を宣言します。

注：

は、単にリテラルテンプレート外で関数を宣言すると、あなたが好きな場所リテラルの内側にそれを呼び出すことが最良の選択肢

Answer 2

ですこれは、あなたがリテラルテンプレート内の関数を呼び出すことができる方法です。..

function something() { 
    return "better than nothing"; 
} 
console.log(`Something is ${something()}.`); 
//=> Something is better than nothing.