ES6 的标记模板文字的 ES5 替代方案是什么？

Question

我在 ES6 标准中有以下代码：

 function test(html, ...args) {
   return html.slice(1).reduce((str, elem, i) => str + args[i] + 
  elem, html[0]);
 }

这是使用它：

 var hello = 'Hello';
 var world = 'Arcanadian Arc';
 document.body.innerHTML = test`<h1>${hello} ${world}!</h1>`;

输出 ：

 <h1>Hello Arcanadian Arc!</h1>

由于它是 ES6 标准代码，IE 不支持它。所以，我决定使用 Babel 将其转译为 ES5，这就是我所做的。但我对输出并不满意。这是输出：

function _templateObject() {
   var data = _taggedTemplateLiteral(["<h1>", " I am very happy </h1>"]);

    _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 > 1 ? _len - 1 : 0), _key = 1; _key < _len; _key++) {
     args[_key - 1] = arguments[_key];
   }

   return html.slice(1).reduce(function (str, elem, i) {
     return str + args[i] + elem;
   }, html[0]);
}

并使用它：

 var hello = 'Hello';
 var world = 'Arcanadian Arc';
 document.body.innerHTML = test(_templateObject(), hello);

它可以工作，但它的语法有点混乱。我想通过将 ES6 的 ${} 替换为 {{ }} 或 aome other 来这样称呼它，然后它看起来像这样：

var hello = "Hello";
var world = "Arcanadian Arc";
document.body.innerHTML = test`<h1>{{ hello }} {{ world }}!';

输出 ：

<h1>Hello Arcanadian Arc!</h1>

它看起来很像 ES6，最重要的是，它不像之前的那样混乱。但我不知道该怎么做！你能帮助我吗 ？但问题是，这能做到吗？这可以作为 ES6 的替代品吗？或者有一个 pollyfill 可以用吗？

提前致谢

Answer 1

您可以在正则表达式和替换的帮助下执行此类操作，但您应该在开发项目时使用最新功能，将这些怪癖留给诸如babel或任何其他转译器之类的工具

var hello = "Hello";
var world = "Arcanadian Arc";

function test(str,args){
  return str.replace(/{{(.*?)}}/g, (m,g1)=> args[g1.trim()] || m)
}

console.log(test('<h1>{{ hello }} {{ world }}!</h1>',{hello,world}))