doT模板中直接写Javascript代码的坑

前端 坑 doT

在使用doT的过程中，由于项目需要，我们将电话号码拼成了以逗号分开的字符串

/** 初始json对象 **/
 var data = {
    tel:'4008107107,4008107106'
 }

而页面中需要显示独立的电话号码，这就需要在doT模板渲染中使用Javascript的 split 方法，将字符串解析成数组。

/** 目标json对象 **/
 var data = {
    tel:[4008107107,4008107106]
 }

我们知道，doT的原理就是将整个的模板html代码放在<script></script>标签中，然后生成一段可执行的Javascript代码，然后将JSON格式的数据传入该函数，return生成的html代码，而doT在生成可执行Javascript代码片段的过程中其实就是字符串的解析与拼接。

/**doT中直接写Javascript代码**/
{{it.tel = it.tel.split(',')}}

写成上面这样子，页面渲染会报错Uncaught SyntaxError: Unexpected identifier，因为在生成Javascript代码片段时该段JS代码被解析字符串it.tel = it.tel.split(',')，与后一句可执行的JS代码拼接之后变成it.tel = it.tel.split(',') out += '';，doT无法像Javascript解析器一样自动补全分号，这就导致了上面的错误发生。

解决方法

加上分号就好了

{{it.tel = it.tel.split(',');}}