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的$ {}来称呼这样的话，看起来像这样：

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

输出：

<h1>Hello Arcanadian Arc!</h1>

它看起来很像ES6和主要内容，并不像早期版本那样凌乱。但是我不知道该怎么做！你能帮助我吗？但是问题是，这可以做到吗？可以用作ES6的替代产品吗？还是为此而设的？

预先感谢

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}))

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

1 个答案: