Javascript 呈现动态HTML字符串的更好方法是什么？

假设我有包含以下字符串的HTML模板文件：

<p> >>LEFT PART<< {{Data}} >>RIGHT PART<< </p>

相反。实际上，使用string.prototype.replace很容易做到这一点。但现在我有两个问题：

JS模板引擎如何执行类似的任务？为了使我的问题更加明确和具体，假设我说的是Jade，但你可以描述另一个引擎/框架，如Pug、Dot等。。他们使用正则表达式还是一些复杂的算法来搜索子字符串

如果我使用正则表达式并且字符串的左、右部分都包含10000个字母，我会失去明显的执行速度吗？或者html文件包含100多行代码

---

另外，我在谷歌上搜索了这些问题，但大多数答案都描述了如何使用框架/引擎呈现页面，而不是它们是如何做到的。

要回答您的两个问题，顺序如下：

简单的JS模板库倾向于使用基本的JS字符串#indexO调用来搜索打开的字符，正如您所期望的那样。但是其他人——特别是那些没有从头开始构建自己模板的人——通常依赖于更复杂的技术

作为反例，Vue的模板引擎严重依赖正则表达式

您不希望对正则表达式执行此操作，因为正则表达式在每次开始匹配时都开始遍历其状态机；对于足够大的字符串，这是大量额外的处理开销，这在#1中的“indexOf”技术中是不需要的。（对于小型模板或功能足够强大的机器，这并不是一个巨大的时差；但在大型或大规模并行作业中值得注意！）

---

最后一个警告：许多现代JS模板引擎（包括Vue）在开始替换模板字符串之前将模板转换为一组较小的字符串；这使他们能够从处理较短字符串的改进运行时（和并行化）中获益。

最有可能的是，模板引擎将为字符串中的

{{

和

}

的所有位置编制索引，然后应用一些子字符串逻辑来获取/验证它们之间的数据，并确保每个打开的令牌后面都有一个关闭令牌。您也可以使用正则表达式来实现这一点，但是一个合适的正则表达式（使用）

{（（？：（！}}）。+）}

（或者

{{2}（（？：（？！}{2}）。+）}{2}

）在长字符串上效率不是很高，这就是索引的优势所在。谢谢！我不能对你的评论投赞成票，但它很有用

<p> >>LEFT PART<< My nice data >>RIGHT PART<< </p>