title: Can ES6 template literals be substituted at runtime (or reused)?
body: <p><strong>tl;dr: Is it possible to make a reusable template literal?</strong></p>
  
  <p>I've been trying to use template literals but I guess I just don't get it and now I'm getting frustrated. I mean, I think I get it, but "it" shouldn't be how it works, or how it should get. It should get differently.</p>
  
  <p>All the examples I see (even tagged templates) require that the "substitutions" be done at declaration time and not run time, which seems utterly useless to me for a template. Maybe I'm crazy, but a "template" to me is a document that contains tokens which get substituted when you use it, not when you create it, otherwise it's just a document (i.e., a string). A template is stored with the tokens <em>as tokens</em> &amp; those tokens are evaluated when you...evaluate it.</p>
  
  <p>Everyone cites a horrible example similar to:</p>
  
  <pre><code>var a = 'asd';
  return `Worthless ${a}!`
  </code></pre>
  
  <p>That's nice, but if I already know <code>a</code>, I would just <code>return 'Worthless asd'</code> or <code>return 'Worthless '+a</code>. What's the point? Seriously. Okay the point is laziness; fewer pluses, more readability. Great. But that's not a template! Not IMHO. And MHO is all that matters! The problem, IMHO, is that the template is evaluated when it's declared, so, if you do, IMHO:</p>
  
  <pre><code>var tpl = `My ${expletive} template`;
  function go() { return tpl; }
  go(); // SPACE-TIME ENDS!
  </code></pre>
  
  <p>Since <code>expletive</code> isn't declared, it outputs something like <code>My undefined template</code>. Super. Actually, in Chrome at least, I can't even declare the template; it throws an error because <code>expletive</code> is not defined. What I need is to be able to do the substitution after declaring the template:</p>
  
  <pre><code>var tpl = `My ${expletive} template`;
  function go() { return tpl; }
  var expletive = 'great';
  go(); // My great template
  </code></pre>
  
  <p>However I don't see how this is possible, since these aren't really templates. Even when you say I should use tags, nope, they don't work:</p>
  
  <pre><code>&gt; explete = function(a,b) { console.log(a); console.log(b); }
  &lt; function (a,b) { console.log(a); console.log(b); }
  &gt; var tpl = explete`My ${expletive} template`
  &lt; VM2323:2 Uncaught ReferenceError: expletive is not defined...
  </code></pre>
  
  <p>This all has led me to believe that template literals are horribly misnamed and should be called what they really are: <em>heredocs</em>. I guess the "literal" part should have tipped me off (as in, immutable)?</p>
  
  <p><strong>Am I missing something? Is there a (good) way to make a reusable template literal?</strong></p>
  
  <hr>
  
  <p>I give you, <em><strong>reusable template literals</strong></em>:</p>
  
  <pre><code>&gt; function out(t) { console.log(eval(t)); }
    var template = `\`This is
    my \${expletive} reusable
    template!\``;
    out(template);
    var expletive = 'curious';
    out(template);
    var expletive = 'AMAZING';
    out(template);
  &lt; This is
    my undefined reusable
    template!
    This is
    my curious reusable
    template!
    This is
    my AMAZING reusable
    template!
  </code></pre>
  
  <p>And here is a naive "helper" function...</p>
  
  <pre><code>function t(t) { return '`'+t.replace('{','${')+'`'; }
  var template = t(`This is
  my {expletive} reusable
  template!`);
  </code></pre>
  
  <p>...to make it "better".</p>
  
  <p>I'm inclined to call them template guterals because of the area from which they produce twisty feelings.</p>