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>`;

Output：

 <h1>Hello Arcanadian Arc!</h1>

因为它是 ES6 标准代码，IE 不支持它。 因此，我决定使用 Babel 将其转换为 ES5，这就是我所做的。 但我对 output 并不满意。 这是 output：

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 的 ${} 替换为 {{ }} 或其他名称来调用它，然后它看起来像这样：

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

Output：

<h1>Hello Arcanadian Arc!</h1>

它看起来很像 ES6，主要的是，它不像早期的那样凌乱。 但我不知道该怎么做？ 你能帮我吗，但问题是？ 可以这样做吗？ 这可以用作 ES6 的替代品吗？ 还是有一个pollyfill呢？

提前致谢

Answer 1

您可以在 regex 和 replace 的帮助下执行此类操作，但您应该在开发项目时使用最新功能，将这些怪癖留给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}))