一个关于 ES 6 字符串模板的问题，使用webpack 转化失效。

Question

我将某些独立的html结构抽出来当做tpl文件:

<div id="demo">
  <div class="part-a">
    ${content.partA}
    <div class="part-b">
      ${content.partB}
      <div class="part-c">${content.partC}</div>
    </div>
  </div>
</div>

然后在 js 中这样写:

import tpl from './src/test.tpl';

const html = content => `${tpl}`;

let content = {
  partA: 'a',
  partB: 'b',
  partC: 'c'
};

console.log(html(content));

但是输出的结果是这样：

请问如何才能将里面的变量替换？

Answer 1

function format (template, data) {
    var keys = Object.keys(data),
        dataList;
    dataList = keys.map(function (key) {
        return data[key];
    });
    // 这里使用反引号来构建模板引擎
    return new Function (keys.join(','), 'return `' + template + '`;')
        .apply(null, dataList);
}
    import tpl from './src/test.tpl';


let content = {
  partA: 'a',
  partB: 'b',
  partC: 'c'
};

    let re= format(tpl ,content );

Answer 2

因为反引号模板插值只会翻译一次。

const html = content => `${tpl}`;

// 等价于
const html = content => "" + tpl ""; 

// 你需要在运行时对 tpl 再次进行模板插值，只考虑实现功能的话，可以这样：
const html = content => eval("`" + tpl "`"); 

Answer 3

概念要搞清楚，模板字符串是属于javascript的，不是html的，不能用在html上，你的问题如果不用第三方的模板引擎的话只能手动去操作DOM把你的html字符串拼接到页面上，相关的api有innerHTML，appendChild等