最近几天家里的事情有点忙，导致一直没有更新博客，但是不代表一直没看技术，学习不能停止，正所谓活到老学到老（行啦，别装逼了）ok，我们今天简单的介绍一个js里面的不常用到的函数，但是功能确实很强大的，eval（）运算函数
为了看出来他的强大，我写了一个简单的计算器，来说明一下这个函数的巧妙和强大。
效果预览：
不BB，看代码：
css源码：
body{margin-left: 40%;} div{width: 25rem;height: 40rem;background-color: ;} input{width: 95%;height: 100%;border-color: #398439;margin-left: 0.6rem;font-size: 3rem;} button{width: 5.5rem;height: 3.5rem;background-color: #419641;margin-left: 0.5rem;margin-top: 0.5rem;font: "arial black";font-size: 3rem;border-color: #449D44;border-radius: 10%;} .head{width: 100%;height: 13%;background-color: #31708F;margin-top: 1rem;} .put{width: 100%;height: 15%;background-color: ;margin-top: 1rem;} .onnum{width: 100%;height: 64%;margin-bottom: 1rem;margin-top:1rem; background-color: ;} .onleft{width: 75%;height: 100%;margin-bottom: 1rem;margin-top:1rem; background-color: ;float: left;} .onright{width: 25%;height: 100%;margin-bottom: 1rem;margin-top:1rem; background-color: ;float: right;}
H5源码：
<div> <div class="put"> <input type="text" id="num" value="" readonly="readonly"/> </div> <div class="onnum"> <div class="onleft"> <button value="9" οnclick="count(this.value)">9</button><button value="8" οnclick="count(this.value)">8</button><button value="7" οnclick="count(this.value)">7</button> <button value="6" οnclick="count(this.value)">6</button><button value="5" οnclick="count(this.value)">5</button><button value="4" οnclick="count(this.value)">4</button> <button value="3" οnclick="count(this.value)">3</button><button value="2" οnclick="count(this.value)">2</button><button value="1" οnclick="count(this.value)">1</button> <button value="=" οnclick="count(this.value)">=</button><button value="0" οnclick="count(this.value)">0</button><button value="C" οnclick="count(this.value)">C</button> </div> <div class="onright"> <button value="+" οnclick="count(this.value)">+</button> <button value="-" οnclick="count(this.value)">-</button> <button value="*" οnclick="count(this.value)">*</button> <button value="/" οnclick="count(this.value)">/</button> </div> </div> </div>
js源码：
function count(val){ var num = document.getElementById("num"); switch(val){ case "=": num.value = eval(num.value); break; case "C": num.value = ""; break; default: num.value = num.value+val; break; } }
代码不多，毕竟功能就简单，那么下面我们简单的说一下eval的函数的用法和功能
eval（）这个括号里面不管是什么运算，都是可以直接运算的。举W3Cshool的例子：
<script type="text/javascript"> eval("x=10;y=20;document.write(x*y)") document.write(eval("2+2")) var x=10 document.write(eval(x+17)) </script>
输出：
200
4
27
所以我们做计算器的时候需要做的就是怎么将text框里面的东西格式变成他需要的格式。
常见异常：
如果参数中没有合法的表达式和语句，则抛出 SyntaxError 异常。
如果非法调用 eval()，则抛出 EvalError 异常。
如果传递给 eval() 的 Javascript 代码生成了一个异常，eval() 将把该异常传递给调用者
说明：
该方法只接受原始字符串作为参数，如果 string 参数不是原始字符串，那么该方法将不作任何改变地返回。因此请不要为 eval() 函数传递 String 对象来作为参数。
如果试图覆盖 eval 属性或把 eval() 方法赋予另一个属性，并通过该属性调用它，则 ECMAScript 实现允许抛出一个 EvalError 异常
![[JS]同事：这次就算了，下班回去赶紧补补内置函数，再犯肯定被主管骂](https://ucc.alicdn.com/3mfxe2r26qbaq/developer-article1635463/20241109/c55917b4a28342b78633c9da58d86e30.png?x-oss-process=image/resize,h_160,m_lfit)