JavaScript 中的模板文字在底层如何工作？

所以，模板字符串在很多语言中都是一个非常巧妙的功能。如果你不熟悉，模板字符串允许你在字符串字面量中嵌入代码表达式。例如，在 JavaScript 中，你可以编写以下代码并生成输出“Hello, 2 is the answer!”

console.log(`Hello, ${1 + 1} is the answer!`);

很简洁吧？但它的底层是如何运作的呢？

我深入研究了 NodeJS 代码库来解决这个问题，但最终却陷入了一场大混乱。

我找到了解析模板字面量的代码，并确定了用于存储信息的TemplateObjectcooked_string数据结构。但我有点搞不清楚解析代码中多次引用的 a 到底是什么。不幸的是，我用谷歌搜索，结果只有煮熟的四季豆食谱。朋友们，我陷入了语言歧义的泥潭！也许我走错了方向？

当我在 Node 代码库中找到一些解析实际模板字符串的代码时，我终于弄清楚了这一点。从中我可以看出以下内容。

1. 当解析器遇到反引号时，它会调用该parseTemplate方法（代码）。
2. 该parseTemplate方法遍历模板字面量中的所有元素。如果其中一个元素是表达式（即以 $ 开头），则该方法首先解析该表达式，然后继续解析模板字面量（代码）中的其他元素。
3. 有一个parseTemplateElement方法可以解析模板字面量中的非表达式元素。这就是 cooked_string 的由来。有趣的是，cookedstring 似乎是对一个结构化对象的引用，该对象表示抽象语法树中的字符串，而rawstring 则表示字符串本身的字节。(代码)

上面步骤 #2 中最有趣的代码是用于解析模板字面量中嵌入表达式内容的parseExpression 方法。此方法在解析代码库中被广泛使用。例如，它用于解析for 循环中的初始化代码或switch 语句中的 case 语句。

经过这次探索，看来之前的 TemplateObject 引导似乎不太正确。阅读基于 JavaScript 的Acorn 解析器中的代码比钻研 C++ 要清晰得多。

所以，您已经了解了，模板文字的大部分魔力都发生在解析时，即生成模板文字的抽象语法树时。