javaScript中eval()函数和JSON.parse()函数

喜欢ヅ旅行 2022-11-15 11:53 274阅读 0赞

[JavaScript中eval()函数][JavaScript_eval]

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2N6aDUwMA_size_16_color_FFFFFF_t_70][]

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2N6aDUwMA_size_16_color_FFFFFF_t_70 1][]

**运行结果如下：**

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2N6aDUwMA_size_16_color_FFFFFF_t_70 2][]

> **注意:**虽然**eval()**的功能非常强大，但在实际使用中用到它的情况并不多。

> 从案例中也能看出，**eval()函数**会执行字符串中的js代码,这是不太安全的，试想一下，如果有不怀好意的人提交一些恶意的js代码到服务器上，那是会造成安全隐患的。所以，我个人推荐使用JSON.parse()

**以下是完整的源码**

<!DOCTYPE html>
    <html>
    <head>
    <meta charset="UTF-8">
    <title>javaScript中eval()函数和JSON.parse()函数</title>
    <style type="text/css">
    input[type=button] {
    	background-color: #8E388E;
    	border: 0px solid #8E388E;
    	color: #fff;
    	width: 160px;
    	height: 40px;
    	border-radius: 6px; /*把边框做成圆角*/
    }
    </style>
    <script type="text/javascript">
    //报错，Uncaught ReferenceError: hello is not defined
    // console.log('*4*', eval('hello'));
    
    console.log('*1*', eval('var a = 6; var b = 10; a * b')); //60
    console.log('*2*', eval('5 + 3')); //8
    console.log('*3*', eval(2 + 8)); //10
    
    var x = 20;
    console.log('*4*', eval(x + 30)); //50
    
    var fn1 = function() {return 666;};
    
    console.log(eval(fn1)); //ƒ () {return 666;}
    //Uncaught SyntaxError: Function statements require a function name
    // console.log(eval(fn1 + "()"));
    console.log(eval("(" + fn1 + "()" + ")")); //666
    
    var str = '{"id" : 12, "name" : "令狐冲", "f" : "function hi(){console.log(\'hi tom\');}"}';
    // console.log(eval(str)); //报错
    console.log(eval('(' + str + ')')); //{id: 12, name: "令狐冲"}
    var obj = eval('(' + str + ')');
    console.log(obj.id, obj.name); //12 "令狐冲"
    
    //
    var obj2 = JSON.parse(str);
    console.log(obj2);
    console.log(obj2.id, obj2.name);
    
    //字符串中包含js代码
    var test = '{"name" : "韦小宝", "f" : console.log("江西省赣州市于都县")}';
    var obj3 = eval('(' + test + ')'); //eval()函数会执行字符串中的js代码
    console.log('*A*' ,obj3, obj3.name, typeof obj3.name, obj3.f, typeof obj3.f);
    
    //Uncaught SyntaxError: Unexpected token c in JSON at position 23
    // var obj4 = JSON.parse(test);
    
    var test2 = '{"name" : "张无忌", "f" : "console.log(123456);"}';
    var obj5 = eval('(' + test2 + ')');
    console.log('*B*', obj5, obj5.name, typeof obj5.name, obj5.f, typeof obj5.f);
    
    var obj6 = JSON.parse(test2);
    console.log('*C*', obj6, obj6.name, typeof obj6.name, obj6.f, typeof obj6.f);
    </script>
    </head>
    <body style="background-color: #CCE8CF;">
    	<h1>javaScript中eval()函数和JSON.parse()函数</h1>
    	<div id="div1" style="background-color: Wheat; height: 100%;"></div>
    </body>
    </html>

**注意:**虽然**eval()**的功能非常强大，但在实际使用中用到它的情况并不多。

[JavaScript_eval]: https://www.w3school.com.cn/js/jsref_eval.asp
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2N6aDUwMA_size_16_color_FFFFFF_t_70]: /images/20221022/d1714c80afa54d00bff22c13c689721c.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2N6aDUwMA_size_16_color_FFFFFF_t_70 1]: /images/20221022/5188d8cf7384408b8f969c5624cf37e3.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2N6aDUwMA_size_16_color_FFFFFF_t_70 2]: /images/20221022/b238dad38b174079987e22e066acd6e9.png