Как вызвать вызов функции внутри литерала шаблона

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, вы можете вернуть пустую строку из вашей функции.

(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.