运行结果如下:
注意:虽然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()的功能非常强大,但在实际使用中用到它的情况并不多。