js中eval方法詳解之eval方法的初級應(yīng)用
前言
在我看來,js中的eval()方法就是一個js語言的執(zhí)行器,它能把其中的參數(shù)按照JavaScript語法進行解析并執(zhí)行。
語法:
eval(s);
eval()方法中的參數(shù)s有多種情況。參數(shù)的不同形式,會使eval()方法執(zhí)行的結(jié)果和返回值有差別。下面來說說他們的區(qū)別。
eval()方法的參數(shù)形式
如果參數(shù)s不是字符串,而是整數(shù)或者是Function類型,則直接返回該整數(shù)或Function
舉個栗子
例1:
var x = 1; var y = eval(x);//eval()方法返回1 var z = eval(1)//eval()方法返回1
例2:
var f = eval( function(){ console.log("1111"); return 1 } ); /* eval()方法返回: function(){console.log("1111");return 1;}方法 */ var s = f();//執(zhí)行方法 s=1,打印日志"1111" /**>>>>>>>>>>>>>>>**/ var ff = function(){ console.log("1111"); return 1; }; var f = eval(ff);//eval()方法返回ff方法 var s = ff();//執(zhí)行ff方法 s=1,打印日志"1111" /**>>>>>>>>>>>>>>>**/ function ff(){ console.log("1111"); return 1; }; var f = eval(ff);//eval()方法返回ff方法 var s = ff();//執(zhí)行ff方法 s=1,打印日志"1111"
如果參數(shù)s是字符串,并且字符串中是表達式,則eval()方法會計算字符串中的表達式,返回該表達式計算的結(jié)果。
舉個栗子
eval("'true'");//返回字符串"true" eval("ture");//返回Boolean類型的true eval("1");//返回整數(shù)1 eval("[0,1,2]");//返回數(shù)組[0,1,2] eval("2+2");//返回整數(shù)4 eval("2+'2'");//返回字符串"22"
如果參數(shù)s是字符串,并且字符串中的表達式是JSON格式(此時的JOSN格式外面要加上一對小括號將JSON包圍起來),則eval()方法返回該JSON。
舉個栗子
var j = "{'aa':11,'bb':22}"; eval("("+j+")"); //返回{"aa":11,"bb":22} eval("({'aa':11,'bb':22})"); //返回{"aa":11,"bb":22} eval("({aa:11,bb:22})"); //js中{aa:11,bb:22}這種格式在解析時會轉(zhuǎn)換成{'aa':11,'bb':22}這種格式 eval("{'aa':11,'bb':22}"); //拋出異常
附注
對于eval()方法,上面所說的的JSON格式也是屬于表達式的一種。但是如果JSON格式中沒有小括號包圍,則該eval()方法就不會返回該對象。
如:eval(“{‘aa’:11,’bb’:22}”)這種格式,就不會返回{‘aa’:11,’bb’:22}。因為eval()方法在處理方括號”{}”時,會把它當(dāng)成是一個語句塊。那么eval()方法只會執(zhí)行該語句,并不會返回該值(結(jié)果是拋出異常)。
正確的寫法是:在JSON格式外加上小括號”()”,使其強制類型轉(zhuǎn)換成JSON格式(表達式),并返回該JSON值。這一點和即時函數(shù)(function(){})()一樣,()的作用也是將該function強制轉(zhuǎn)換成表達式并返回。
如果參數(shù)s是字符串,并且字符串中是語句或語句塊,則eval()方法會執(zhí)行該語句或語句塊,并且返回undefined
舉個栗子
eval("var x='1';"); //返回undefined console.log(x); //打印字符串1 /**>>>>>>>>>>>>>>>**/ eval("var x=1;var y=2;var z=x+y;"); //返回undefined console.log(z+""); //打印字符串3 /**>>>>>>>>>>>>>>>**/ s = eval("function t(){alert(3)};t();"); //執(zhí)行定義并調(diào)用t的方法:彈出3.并且返回undefined console.log(s); //打印undefined /**>>>>>>>>>>>>>>>**/ eval("var j={sex:'男',age:27};alert(j.age);"); /* 此處的json對象不用小括號"()"括起來。因為該處是執(zhí)行語句,而非計算表達式 */
附注
eval()方法中,如果json格式是存在于語句中的,那么該json格式不需要用小括號”()”括起來。表達式中的json要括起來的原因是,eval()要計算表達式并且返回結(jié)果。而eval()對語句只是執(zhí)行,并不會計較返回值(因為返回的都是(undefined)
eval()方法的錯誤處理機制
如果eval()參數(shù)中有非法的表達式和語句,則拋出 SyntaxError 異常。
如果非法調(diào)用 eval(),則拋出 EvalError 異常。
如果傳遞給 eval() 的 Javascript 代碼生成了一個異常,eval() 將把該異常傳遞給調(diào)用者。
注:eval()方法在執(zhí)行js代碼時可能會出現(xiàn)異常,所以最好用try…catch語句來執(zhí)行eval()方法
舉個栗子
例1:
var y = "var s = '1ss';s.replace('1','s')"; try{ eval(y);//執(zhí)行該方法 }catch(exception){ console.warn(exception); }
例2:
var y = "var s = 1ss;s.replace('1','s')"; try{ eval(y);//拋出異常 }catch(exception){ console.warn(exception); //打?。篣nexpected token ILLEGAL }
例3:
var y = "var s = 1ss;s.replace('1','s')"; try{ var zz = eval; zz(y);//執(zhí)行該方法 }catch(exception){ console.warn(exception); }
注意:
使用eval會有很多問題,如果想要實現(xiàn)轉(zhuǎn)化,可以使用JSON.parse,如果后臺返回為JSON對象,則直接使用data就可以。如果使用jq,則將type設(shè)置為json,或者利用$.getJSON()方法獲得服務(wù)器返回,就不需要eval方法了
使用eval轉(zhuǎn)化時為什么要添加括號
這是eval自身的問題。由于json是以{}的方式來開始以及結(jié)束的,在js中,它會被當(dāng)成一個語句塊來處理,所以必須強制性的將它轉(zhuǎn)化成一種表達式。加上()是迫使eval函數(shù)在處理js代碼的時候強制將{}內(nèi)的表達式轉(zhuǎn)化為對象,而不是作為語句來執(zhí)行。
總結(jié)
到此這篇關(guān)于js中eval方法詳解之eval方法的初級應(yīng)用的文章就介紹到這了,更多相關(guān)js中eval方法初級應(yīng)用內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
- JavaScript中eval()函數(shù)用法詳解
- JS使用eval()動態(tài)創(chuàng)建變量的方法
- js中eval()函數(shù)和trim()去掉字符串左右空格應(yīng)用
- js中的eval()函數(shù)把含有轉(zhuǎn)義字符的字符串轉(zhuǎn)換成Object對象的方法
- JavaScript中的eval()函數(shù)詳解
- javascript eval()用法
- JavaScript eval() 函數(shù)介紹及應(yīng)用示例
- 對js eval()函數(shù)的一些見解
- JavaScript中的eval()函數(shù)使用介紹
- JavaScript eval()函數(shù)定義及使用方法詳解
相關(guān)文章
textarea不能通過maxlength屬性來限制字數(shù)的解決方法
textarea稱文本域,又稱文本區(qū),其不能通過maxlength屬性來限制字數(shù),為此必須尋求其他方法來加以限制以達到預(yù)設(shè)的需求2014-09-09JavaScript ECMA-262-3 深入解析(一):執(zhí)行上下文實例分析
這篇文章主要介紹了JavaScript ECMA-262-3 執(zhí)行上下文,結(jié)合實例形式詳細分析JavaScript ECMA執(zhí)行上下文相關(guān)概念、原理與操作注意事項,需要的朋友可以參考下2020-04-04javascript 組合按鍵事件監(jiān)聽實現(xiàn)代碼
這篇文章主要介紹了javascript 組合按鍵事件監(jiān)聽實現(xiàn)代碼的相關(guān)資料,需要的朋友可以參考下2017-02-02