本文介绍了一种在 JavaScript 中利用初始化数据装配 HTML 模版的通用方法。通过定义包含占位符的字符串模板，结合正则表达式遍历数据对象，将数据值动态替换到模板中，从而生成最终的 HTML 结构。该方法适用于简单的数据渲染场景，无需引入重型框架即可实现基础的数据与视图绑定。
数据与模板定义
var list = [{id:1, name:"czone", age:21}, {id:2, name:'czonechan', age:21}];
接着定义一个 HTML 模板字符串，其中使用 $key 格式作为占位符，如 $id、$name 和 $age，用于后续的数据替换。
通用装配方法实现
目标是实现一个通用的 JavaScript 函数，该函数接收数据列表和模板字符串作为参数，自动将数据装配到模板中。
具体实现逻辑如下所示。
定义函数 displayTemplate，接收 list 和 template 两个参数。
初始化一个空字符串 result 用于存储最终生成的 HTML 代码。
遍历数据列表 list，使用 for 循环从索引 0 到 list.length-1 进行处理。
在每次循环中，将原始模板字符串赋值给临时变量 temp，避免修改原始模板。
使用 for...in 循环遍历当前数据对象 list[i] 的所有键值对。
{
针对每个键 k，构建一个全局匹配的正则表达式 reg，模式为 "\\$"+k，即匹配以 $ 开头且后跟键名的字符串。
调用 temp.replace 方法，传入正则表达式 reg 和一个回调函数。
在回调函数中，返回当前数据对象中对应键 k 的值 list[i][k]，完成替换逻辑。
})
}
将替换后的 temp 字符串累加到 result 中。
}
循环结束后，返回拼接好的完整 HTML 字符串 result。
}