title: What is the ES5 alternative of ES6's tagged template literals?
body: <p>I have the following code in ES6 standard :</p>
  
  <pre><code> function test(html, ...args) {
     return html.slice(1).reduce((str, elem, i) =&gt; str + args[i] + 
    elem, html[0]);
   }
  </code></pre>
  
  <p>And this to use it :</p>
  
  <pre><code> var hello = 'Hello';
   var world = 'Arcanadian Arc';
   document.body.innerHTML = test`&lt;h1&gt;${hello} ${world}!&lt;/h1&gt;`;
  </code></pre>
  
  <p>Output :</p>
  
  <pre><code> &lt;h1&gt;Hello Arcanadian Arc!&lt;/h1&gt;
  </code></pre>
  
  <p>As, it's a ES6 standard code, IE doesn't support it. So, I decided to transpile this to ES5 using Babel and that's what I did. But I am not satisfied with the output. Here is the output : </p>
  
  <pre><code>function _templateObject() {
     var data = _taggedTemplateLiteral(["&lt;h1&gt;", " I am very happy &lt;/h1&gt;"]);
  
      _templateObject = function _templateObject() {
       return data;
    };
  
     return data;
   }
  
    function _taggedTemplateLiteral(strings, raw) { if (!raw) { 
     raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
  
   function test(html) {
     for (var _len = arguments.length, args = new Array(_len &gt; 1 ? _len - 1 : 0), _key = 1; _key &lt; _len; _key++) {
       args[_key - 1] = arguments[_key];
     }
  
     return html.slice(1).reduce(function (str, elem, i) {
       return str + args[i] + elem;
     }, html[0]);
  }
  </code></pre>
  
  <p>And to use it :</p>
  
  <pre><code> var hello = 'Hello';
   var world = 'Arcanadian Arc';
   document.body.innerHTML = test(_templateObject(), hello);
  </code></pre>
  
  <p>It works but its syntax is a bit messy. I wanted to call this something like this by replacing ES6's ${} with a {{ }} or aome other, then it would look like this :</p>
  
  <pre><code>var hello = "Hello";
  var world = "Arcanadian Arc";
  document.body.innerHTML = test`&lt;h1&gt;{{ hello }} {{ world }}!';
  </code></pre>
  
  <p>Output :</p>
  
  <pre><code>&lt;h1&gt;Hello Arcanadian Arc!&lt;/h1&gt;
  </code></pre>
  
  <p>It looks pretty like ES6 and the main thing, it is not messy like the earlier one. But I don't know how to do that ! Can you help me ? But the question is, can this be done ? Can this be used as an ES6 one's alternative ? Or is there a pollyfill for it ?</p>
  
  <p>Thanks In Advance</p>