在前端开发中，我们通常会使用 <script> 标签来引入外部的 JavaScript 文件。但是你是否知道，你也可以将 JavaScript 代码放在字符串中，并通过执行这个字符串来运行该代码吗？本文将深入探讨这个话题。
如何在字符串中编写 JavaScript 代码
将 JavaScript 代码放在字符串中的最简单方法是使用模板字面量（Template literals）。模板字面量是一种特殊类型的字符串，它允许插入 JavaScript 表达式。例如：
----- -------- - -------------------- ----------
上述代码定义了一个名为 myString 的变量，其中存储了一个字符串，该字符串包含一个 console.log() 函数调用，输出 "Hello, world!" 到控制台。要运行这个函数，我们需要将这个字符串传递给 eval() 函数，如下所示：
---------------
这将在控制台输出 "Hello, world!"。
除了使用模板字面量，您还可以使用传统的字符串拼接技术来构建包含 JavaScript 代码的字符串。例如：
----- -------- - -------------------- - - ---- - ------ ----- ---- - ------- --------------- -- -- ------- ------
在上述代码中，我们首先定义了一个名为 myString 的字符串变量，其中包含一个 console.log() 函数调用，该函数将一个字符串与变量 name 的值连接起来。接下来，我们定义了一个名为 name 的变量，并将其设置为 "John"。最后，我们将这个字符串传递给 eval() 函数以执行它。由于 name 的值为 "John"，因此控制台将输出 "Hello, John!"。
Script 标签在字符串中的应用
将 JavaScript 代码放在字符串中的一个常见用例是在 Web 应用程序中动态添加 <script> 标签。例如，如果您要加载一个外部 JavaScript 文件并在它加载完毕后执行一些代码，您可以使用以下技巧：
----- ------ - --------------------------------- ---------- - ----------------------- ---------------------------------- ------------- - -- -- - ------------------- ---------- -- --------- --
在上述代码中，我们首先创建了一个新的 <script> 元素，并将其 src 属性设置为要加载的 JavaScript 文件的 URL。我们还将这个元素添加到文档头部。然后，我们定义了一个 onload 回调函数，当加载的脚本完成时会被调用。在这个回调函数中，我们可以添加任何希望在脚本加载完成后执行的代码。
但是，有时我们需要在同一页面中添加多个脚本，并按照特定的顺序加载它们。这时，将脚本代码存储在字符串中可以成为一个不错的解决方案。例如：
----- ------- - -
------------------- - ----------
----- ------- - --
------------------- - ----------
---
--------------
--
--------------在上述代码中，我们定义了一个名为 script1 的字符串变量。当这个字符串传递给 eval() 函数时，它将首先输出 "Script 1 loaded!" 到控制台，然后定义了另一个字符串变量 script2，其中包含一个 console.log() 函数调用。最后，我们调用了 eval() 函数，并将 script2 字符串作为参数传递给它。这将在控制台输出 "Script 2 loaded!"。
请注意，在实际的 Web 应用程序中，最好避免使用 eval() 函数，因为它有安全风险。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/27655