巧用Function实现动态字符串模板

在前端模板的实际应用中，模板是提高效率的常用手段，但很多时候，模板可能不是预置的，而是只有在运行时才能决定，这时候就需要使用动态模板。

使用场景如下：
1. 用户(配置人员)在页面输入HTML模板，并嵌入变量
2. 在特定条件下，编译HTML模板
3. 返回编译结果

解决办法如下：

//  假定用户输入的数据为html
if(!!html && html.length > 1) {
    let str = 'return \`' + html + '\`',
        // value与row为参数名称，必须为字符串
        func = new Function('value', 'row', str)

    //  定义范围内的格式化函数，作为回调使用
    //  value与row的实参可以任何数据类型
    this.formatter = function(value, row) {                
        //  返回结果，融入值与本行的值
        let result = func(value, row)
        return result
    }
}

现在进行调用测试如下：

//  假定html的值为 <strong>${value}, ${row.username}</strong>
let value = 'Hello,',
    row = {username: 'yiifaa'}
let result = this.formatter()
console.log(result)
//  输出结果为
// <strong>Hello,yiifaa</strong>

总结

通过设置动态模板，可以将ES6的字符串拓展的优势发挥得淋漓尽致。