Javascript-如何插入html模板并在其中使用变量

我想知道如何将html模板插入javascript函数并在其中使用变量，例如，我在这里创建html并向其插入变量。我想知道如何使它更干净，在一个单独的文件中有一个模板，然后在函数中使用它

      {
      source: autocomplete.sources.hits(videos, { hitsPerPage: 5 }),
      displayKey: 'title',
      templates: {
        header: '<div class="aa-suggestions-category">Videos</div>',
        suggestion: function(suggestion) {
          return '<span>'
                + '<a href="/player/' + suggestion.id + '">'
                +   '<div class="media">'
                +     '<div class="media-left">'
                +       '<img class="media-object" src="https://s3.eu-central-1.amazonaws.com/myUrl/' + suggestion.video_id + '_1.jpg">'
                +     '</div>'
                +     '<div class="media-body">'
                +       '<p>' + suggestion._highlightResult.title.value + '<small><abbr class="timeago" title="' + suggestion.created_at + '">' + suggestion.created_at + '</abbr></small>' + '</p>'
                +       '<small> ' + '</small>'
                +     '</div>'
                +   '</div>'
                + '</a>'
                +'</span>';
        }

{
来源：autocomplete.sources.hits（视频，{hitsPerPage:5}），
displayKey:'标题'，
模板：{
标题：“视频”，
建议：功能（建议）{
返回“”
+ ''
+'';
}

搜索模板系统，如把手、胡须等。这也是更高级别库/框架的一个常见功能，如Knockout、React、Angular、Vue、Ember等。我最喜欢的是ATM。