js中eval方法详解之eval方法的初级应用

 更新时间:2023年01月16日 14:24:36   作者:野生程序员--小阳  
js中eval()函数可计算某个字符串,下面这篇文章主要给大家介绍了关于js中eval方法详解之eval方法的初级应用的相关资料,文中通过实例代码介绍的非常详细,需要的朋友可以参考下

前言

在我看来,js中的eval()方法就是一个js语言的执行器,它能把其中的参数按照JavaScript语法进行解析并执行。

语法:

eval(s);

eval()方法中的参数s有多种情况。参数的不同形式,会使eval()方法执行的结果和返回值有差别。下面来说说他们的区别。

eval()方法的参数形式

如果参数s不是字符串,而是整数或者是Function类型,则直接返回该整数或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();//执行方法  s=1,打印日志"1111"

/**>>>>>>>>>>>>>>>**/

var ff = function(){
   console.log("1111");
   return 1;
};
var f = eval(ff);//eval()方法返回ff方法
var s = ff();//执行ff方法  s=1,打印日志"1111"

/**>>>>>>>>>>>>>>>**/

function ff(){
   console.log("1111");
   return 1;
};
var f = eval(ff);//eval()方法返回ff方法
var s = ff();//执行ff方法  s=1,打印日志"1111"

如果参数s是字符串,并且字符串中是表达式,则eval()方法会计算字符串中的表达式,返回该表达式计算的结果。

举个栗子

eval("'true'");//返回字符串"true"
eval("ture");//返回Boolean类型的true
eval("1");//返回整数1
eval("[0,1,2]");//返回数组[0,1,2]
eval("2+2");//返回整数4
eval("2+'2'");//返回字符串"22"

如果参数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}这种格式在解析时会转换成{'aa':11,'bb':22}这种格式

eval("{'aa':11,'bb':22}");
//抛出异常

附注

对于eval()方法,上面所说的的JSON格式也是属于表达式的一种。但是如果JSON格式中没有小括号包围,则该eval()方法就不会返回该对象。
如:eval(“{‘aa’:11,’bb’:22}”)这种格式,就不会返回{‘aa’:11,’bb’:22}。

因为eval()方法在处理方括号”{}”时,会把它当成是一个语句块。那么eval()方法只会执行该语句,并不会返回该值(结果是抛出异常)。

正确的写法是:在JSON格式外加上小括号”()”,使其强制类型转换成JSON格式(表达式),并返回该JSON值。这一点和即时函数(function(){})()一样,()的作用也是将该function强制转换成表达式并返回。

如果参数s是字符串,并且字符串中是语句或语句块,则eval()方法会执行该语句或语句块,并且返回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();");
//执行定义并调用t的方法:弹出3.并且返回undefined
console.log(s);
//打印undefined

/**>>>>>>>>>>>>>>>**/

eval("var j={sex:'男',age:27};alert(j.age);");
/*
此处的json对象不用小括号"()"括起来。因为该处是执行语句,而非计算表达式
*/

附注

eval()方法中,如果json格式是存在于语句中的,那么该json格式不需要用小括号”()”括起来。表达式中的json要括起来的原因是,eval()要计算表达式并且返回结果。而eval()对语句只是执行,并不会计较返回值(因为返回的都是(undefined)

eval()方法的错误处理机制

如果eval()参数中有非法的表达式和语句,则抛出 SyntaxError 异常。

如果非法调用 eval(),则抛出 EvalError 异常。

如果传递给 eval() 的 Javascript 代码生成了一个异常,eval() 将把该异常传递给调用者。

注:eval()方法在执行js代码时可能会出现异常,所以最好用try…catch语句来执行eval()方法

举个栗子

例1:

var y = "var s = '1ss';s.replace('1','s')";
try{
    eval(y);//执行该方法
}catch(exception){
    console.warn(exception);
}

例2:

var y = "var s = 1ss;s.replace('1','s')";
try{
    eval(y);//抛出异常
}catch(exception){
    console.warn(exception);
    //打印:Unexpected token ILLEGAL
}

例3:

var y = "var s = 1ss;s.replace('1','s')";
try{
    var zz = eval;
    zz(y);//执行该方法
}catch(exception){
    console.warn(exception);
}

注意:

使用eval会有很多问题,如果想要实现转化,可以使用JSON.parse,如果后台返回为JSON对象,则直接使用data就可以。如果使用jq,则将type设置为json,或者利用$.getJSON()方法获得服务器返回,就不需要eval方法了

使用eval转化时为什么要添加括号

这是eval自身的问题。由于json是以{}的方式来开始以及结束的,在js中,它会被当成一个语句块来处理,所以必须强制性的将它转化成一种表达式。加上()是迫使eval函数在处理js代码的时候强制将{}内的表达式转化为对象,而不是作为语句来执行。

总结

到此这篇关于js中eval方法详解之eval方法的初级应用的文章就介绍到这了,更多相关js中eval方法初级应用内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!

相关文章

  • js省市县三级联动效果实例

    js省市县三级联动效果实例

    这篇文章主要介绍了js实现简单的省市县三级联动效果,以完整实例形式分析了JavaScript实现省市县三级联动效果的具体步骤与相关实现技巧,需要的朋友可以参考下
    2016-05-05
  • textarea不能通过maxlength属性来限制字数的解决方法

    textarea不能通过maxlength属性来限制字数的解决方法

    textarea称文本域,又称文本区,其不能通过maxlength属性来限制字数,为此必须寻求其他方法来加以限制以达到预设的需求
    2014-09-09
  • JavaScript ECMA-262-3 深入解析(一):执行上下文实例分析

    JavaScript ECMA-262-3 深入解析(一):执行上下文实例分析

    这篇文章主要介绍了JavaScript ECMA-262-3 执行上下文,结合实例形式详细分析JavaScript ECMA执行上下文相关概念、原理与操作注意事项,需要的朋友可以参考下
    2020-04-04
  • JS组件Bootstrap Table使用实例分享

    JS组件Bootstrap Table使用实例分享

    这篇文章主要为大家详细介绍了JS组件Bootstrap Table分页使用方法,具有一定的实用性,感兴趣的小伙伴们可以参考一下
    2016-05-05
  • Bootstrap按钮组实例详解

    Bootstrap按钮组实例详解

    单个按钮在Web页面中的运用有时候并不能满足我们的业务需求,常常会看到将多个按钮组合在一起使用,比如富文本编辑器里的一组小图标按钮等。本文将详细介绍Bootstrap按钮组,感兴趣的朋友一起看看吧
    2017-07-07
  • javascript 组合按键事件监听实现代码

    javascript 组合按键事件监听实现代码

    这篇文章主要介绍了javascript 组合按键事件监听实现代码的相关资料,需要的朋友可以参考下
    2017-02-02
  • gojs实现蚂蚁线动画效果

    gojs实现蚂蚁线动画效果

    这篇文章介绍了gojs实现蚂蚁线动画效果的方法,文中通过示例代码介绍的非常详细。对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
    2022-01-01
  • 基于JavaScript实现仿京东图片轮播效果

    基于JavaScript实现仿京东图片轮播效果

    这篇文章主要介绍了基于JavaScript实现仿京东图片轮播效果,代码简单易懂,需要的小伙伴参考下吧
    2015-11-11
  • 使用webpack编译es6代码的方法步骤

    使用webpack编译es6代码的方法步骤

    这篇文章主要介绍了使用webpack编译es6代码的方法步骤,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2019-04-04
  • 详解JavaScript设计模式中的享元模式

    详解JavaScript设计模式中的享元模式

    享元模式是一种用于性能优化的模式。享元模式的核心是运用共享技术来有效支持大量细粒度的对象.如果系统中创建了大量类似的对象而导致内存占用过高,本文通过介绍书中文件上传的优化案例来说明享元模式的使用方式和作用,需要的朋友可以参考下
    2023-06-06

最新评论