天天看點

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

JavaScript中eval()函數

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

運作結果如下:

javaScript中eval()函數和JSON.parse()函數
注意:雖然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()的功能非常強大,但在實際使用中用到它的情況并不多。

繼續閱讀