[激灵] 可能是世界上最小的 字符串模板库 了~

[50vip]

仓库地址：https://github.com/hustcc/tplv 请勿用于生产环境，写本地工具之类的可以试试。

要什么仓库地址，就下面 8 行代码。

/**
 * nano tpl library
 * @param template
 * @param data
 */
export default function(template: string, data: object): string {
  const ks = Object.keys(data);
  const vs = ks.map((k: any) => data[k]);

  const t = `return \`${template}\``;
  const f = new Function(...ks, t);

  return f(...vs);
}

模板语法就是 ES6 String template 的语法。

import render from 'tplv';

const template = '${ name }, ${value}(${percent} | Top ${array[2]})';

const data = {
  name: 'Hangzhou',
  value: 1200,
  percent: '13%',
  array: [1, 2, 3, 4]
};

render(template, data)); // will got `Hangzhou, 1200(13% | Top 3)`

[doublleft]

挺好玩的，可以做个 benchmark

[fliu2476]

有点意思

[50vip]

@doublleft benchmark 如果在 new Function 哪里做一个 cache，肯定是无敌的。否则估计是中上等吧~

[wenzichel]

之前保存着一份用正则实现的，应该更简洁一些，不过效率上没有比较哪个更好，而且不能像你这个取数组或者 json 格式里的值

```javascript
const render = function(template, data) {
return template.replace(/\${(.+?)}/g, ($1, $2) => {
const key = $2.trim();
if (data.hasOwnProperty(key)) {
return data[key];
}
return $1;
})
}
```

[50vip]

@wenzichel 正则实现，还有一个就是要去学习语法，tplv 的语法就是 es6 string 模板的语法。

[zrt]

will got ?

[50vip]

@zrt 感觉我英语能力着急…

xxx will be got

will get xx

来 pr😂

[optional]

至少套个 vm2 吧，，，

[50vip]

@optional 什么意思~

[xiri]

最后一句
render(template, data));
是多打了一个括号吗

[50vip]

@xiri o，确实是的~

[myqoo]

@50vip 有个黑科技可以不用 eval/Function 也能生成高性能模板，并且生成速度更快。而且不受 csp unsafa-eval 影响，小程序里也可以用。

[50vip]

@myqoo 你到是说啊~^_^

[myqoo]

@myqoo 原理有点复杂，几行代码实现不了，几句话也说不清。大致思路：函数柯里化。返回预制的闭包。

[50vip]

@myqoo 不信能做到😏

[doublleft]

@50vip #3 new Function 做个闭包 看看能不能缓存函数

[forbreak]

new Function 和 eval 那个效率高呢？我之前也用过类似的方式来解析模板，使用的 eval 处理的。

[50vip]

@doublleft 加个全局缓存，又感觉会产生内存问题，最好是一个 lru 缓存，但是这样，缓存代码都比模板代码多了，哈哈~好囧~

[50vip]

@forbreak 可以 benchmark 试试，应该差不太多吧。eval 稍微快一点。https://atool.vip/#/perf