在前端开发中，我们经常需要执行一些动态生成的 JavaScript 代码。有时候这些代码可能以字符串的形式存储在数据库或文件中。本文将介绍如何执行存储为字符串的 JavaScript 代码，并提供一些示例代码。
eval() 函数
JavaScript 提供了一个内置函数 eval()，它可以执行任何合法的 JavaScript 代码。因此，我们可以使用 eval() 函数来执行存储为字符串的 JavaScript 代码。
以下是一个简单的例子：
const code = "console.log('Hello, World!')";
eval(code); // 输出 "Hello, World!"上面的代码定义了一个字符串变量 code，该变量包含一段输出 "Hello, World!" 的 JavaScript 代码。然后，使用 eval() 函数执行这段代码并打印输出结果。
虽然 eval() 函数非常方便，但也有一些安全问题。如果你不小心将用户输入的内容传递给 eval() 函数，可能会导致代码注入攻击。因此，强烈建议在使用 eval() 函数时进行严格的输入验证和过滤，以确保代码的安全性。
Function 构造函数
除了 eval() 函数之外，JavaScript 还提供了一个更安全的方法来执行存储为字符串的 JavaScript 代码，即使用 Function 构造函数。
Function 构造函数接受一个或多个参数，前面的参数是函数的参数，最后一个参数是函数体。以下是一个示例：
const add = new Function('a', 'b', 'return a + b');
console.log(add(2, 3)); // 输出 5上面的代码定义了一个名为 add 的函数，它接受两个参数并返回它们的和。使用 new Function() 构造函数可以将存储为字符串的函数体转换为函数对象，然后可以像普通函数一样调用它。
与 eval() 函数不同，使用 Function 构造函数创建的函数只能访问全局变量和本地作用域中的变量，并且不能访问调用者的作用域。这使得他更加安全。
示例
下面是一个更复杂的示例，演示如何使用 Function 构造函数执行一个动态生成的 JavaScript 函数：
-- -------------------- ---- -------
----- ---- - -
-------- ------------ -
-- -- -- -- -
------ --
- ---- -
------ ----------- - -- - ----------- - ---
-
-
---------------------------
--
----- --- - --- ---------------
------上面的代码定义了一个字符串变量 code，该变量包含一个名为 fibonacci 的函数定义和一个调用该函数的语句。然后，使用 new Function() 构造函数将其转换为函数对象并执行它。
此示例演示了如何动态生成一个递归函数，并计算斐波那契数列的第 10 个数字。
结论
执行存储为字符串的 JavaScript 代码可能非常有用，但也需要谨慎处理。eval() 函数是最简单的方法，但也有安全问题。相比之下，使用 Function 构造函数更加安全。
在实际应用中，请根据具体情况选择合适的方法，并采取必要的措施确保代码的安全性。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/10749
