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

Question

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

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

让我们假设该字符串的左右部分都不包含类似 {{Data}}，并且我想实现一个函数，该函数接受{Data:"My nice data",Name:"Sebastian"}之类的文件和对象并返回包含

的文件

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

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

1. JS模板引擎如何执行类似的任务？为了使我的问题更明确具体，可以说我在谈论Jade，但是您可以描述另一个引擎/框架，例如Pug，Dot等。它们是否使用正则表达式或一些棘手的算法来搜索子字符串？
2. 如果我使用正则表达式并且字符串的左右两侧都包含10000个字母，我会失去可察觉的执行速度吗？或html文件包含100多行代码。

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

Answer 1

依次回答您的两个问题：

1. 简单的JS模板库倾向于使用基本的JS String＃indexO调用来搜索开放字符，这与您期望的一样。但是其他人（尤其是那些没有从头开始建立自己的模板的人）通常依赖于更复杂的技术。

   作为反例，Vue在其模板引擎中uses lodash.template非常依赖于正则表达式under the hood。

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

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