在前端开发中，JavaScript 是无法避免的一门语言。然而，有一种极易发生问题的做法：使用 eval 函数。这种做法在某些情况下可能是方便的，但更多的时候不见得是最佳选择。在本篇文章中，我们将讨论为什么应该避免使用 eval 并提供一些避免使用它的最佳做法。
为什么应该避免使用 eval？
在 JavaScript 中，eval 函数用来执行字符串中的 JavaScript 代码。这使得代码编写更加灵活，但很容易发生不安全的情况。具体来说，以下是 eval 使用错误的原因：
1. 容易发生全局变量污染
如果 eval 执行的代码中包含全局变量，它可能会意外地污染全局变量空间，从而改变代码的行为。
例如：
eval("var x = 1");
console.log(x); // 输出 1此时，x 变量在全局作用域中创建，并且可以在全局范围内使用。
2. 可能会导致安全问题
由于 eval 函数执行任何 JavaScript 代码，因此如果使用不可信的字符串来调用它，则可能会产生安全隐患。黑客可以通过用户输入或 API 调用等方式向代码中注入恶意代码。
例如：
const input = prompt("请输入你的名字");
eval("alert('欢迎,' + input)");上面的代码在 eval 中执行了一个字符串，该字符串是通过 prompt 获取用户输入的。这是一个非常危险的方式，因为输入的数据可能包含恶意代码。
3. 可能会导致性能问题
由于 eval 函数必须执行字符串中的 JavaScript 代码，这可能会导致性能下降。在某些情况下，eval 的开销可能非常大，并且可以通过编写更好的代码来避免。
避免使用 eval 的最佳做法
为了避免使用 eval 函数，以下是几种最佳做法。
1. 使用字面量表示数值和对象
使用字面量的方式来表示数值和对象是避免使用 eval 的一种最佳做法。这样不仅简单明了，而且更加安全，不会发生全局变量污染和安全问题。
例如：
const num = 123; // 使用字面量表示数值
const obj = { name: "张三" }; // 使用字面量表示对象2. 使用函数代替 eval
如果必须执行 JavaScript 代码字符串，则可以将其包装在函数中，并使用 Function 构造函数来创建一个函数。
例如：
const sum = new Function("a", "b", "return a + b");
console.log(sum(1, 2)); // 输出 33. 使用 JSON.parse 替代 eval
如果需要解析 JSON 字符串，则可以使用 JavaScript 内置函数 JSON.parse 而不是 eval 函数。JSON.parse 能够解析 JSON 中的字符串，并将其转换为 JavaScript 对象。这比使用 eval 更加安全，因为 JSON.parse 只接受一个字符串参数。
例如：
const jsonString = '{ "name": "张三", "age": 18 }';
const jsonObj = JSON.parse(jsonString);
console.log(jsonObj.name); // 输出 "张三"总结
虽然 eval 函数在某些情况下可能是方便的，但使用它会导致全局变量污染、安全和性能问题。避免使用 eval 函数的最佳做法是使用字面量表示数值和对象，使用函数代替 eval，或者使用 JSON.parse 转换 JSON 字符串。只有在必要时，才应该使用 eval 函数，并且在正确使用时应该考虑安全性和性能问题。
示例代码
-- -------------------- ---- ------- -- -- ---- ----- --------- - - ---- --------------- -- -- - ----- ----- - ------------------ ----------------- - --------- -- ------ ----- --- - ---- -- --------- ----- --- - - ----- ---- -- -- --------- ----- --- - --- ------------- ---- ------- - - ---- ------------------ ---- -- -- - ----- ---------- - -- ------- ----- ------ -- --- ----- ------- - ----------------------- -------------------------- -- -- ----
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/648844b648841e98946c885b