javascript eval和JSON之间的联系_javascript技巧

如果您想详细了解eval和JSON请参考以下链接：

eval  ：https://developer.mozilla.org/En/Core_JavaScript_1.5_Reference/Global_Functions/Eval

JSON：http://www.json.org/

eval函数的工作原理

eval函数会评估一个给定的含有JavaScript代码的字符串，并且试图去执行包含在字符串里的表达式或者一系列的合法的JavaScript语句。eval函数将把最后一个表达式或者语句所包含的值或引用作为返回值。

举例说明

• eval评估JavaScript表达式

<span style="FONT-SIZE: medium; LINE-HEIGHT: normal; FONT-FAMILY: Calibri; WHITE-SPACE: normal"><pre class="sh_sourceCode sh_javascript_dom"><span class="sh_keyword" style="FONT-WEIGHT: bold; COLOR: blue; LINE-HEIGHT: 20px">var</span> bar <span class="sh_symbol" style="COLOR: #8b0000; LINE-HEIGHT: 20px">=</span> <span class="sh_string" style="COLOR: red; LINE-HEIGHT: 20px; FONT-FAMILY: monospace"><font face="新宋体">'bar'</font></span><span class="sh_symbol" style="COLOR: #8b0000; LINE-HEIGHT: 20px">;</span><span class="sh_keyword" style="FONT-WEIGHT: bold; COLOR: blue; LINE-HEIGHT: 20px"><br>var</span> foobar <span class="sh_symbol" style="COLOR: #8b0000; LINE-HEIGHT: 20px">=</span> <span class="sh_predef_func" style="FONT-WEIGHT: bold; COLOR: #00008b; LINE-HEIGHT: 20px">eval</span><span class="sh_symbol" style="COLOR: #8b0000; LINE-HEIGHT: 20px">(</span><span class="sh_string" style="COLOR: red; LINE-HEIGHT: 20px; FONT-FAMILY: monospace"><font face="新宋体">'"foo" + bar'</font></span><span class="sh_symbol" style="COLOR: #8b0000; LINE-HEIGHT: 20px">);</span><span class="sh_predef_func" style="FONT-WEIGHT: bold; COLOR: #00008b; LINE-HEIGHT: 20px"><br>alert</span><span class="sh_symbol" style="COLOR: #8b0000; LINE-HEIGHT: 20px">(</span>foobar<span class="sh_symbol" style="COLOR: #8b0000; LINE-HEIGHT: 20px">);</span>

• eval评估JavaScript语句

<span style="FONT-SIZE: medium; LINE-HEIGHT: normal; FONT-FAMILY: Calibri; WHITE-SPACE: normal"><pre class="sh_sourceCode sh_javascript_dom"><span class="sh_keyword" style="FONT-WEIGHT: bold; COLOR: blue; LINE-HEIGHT: 20px">var</span> bar <span class="sh_symbol" style="COLOR: #8b0000; LINE-HEIGHT: 20px">=</span> <span class="sh_string" style="COLOR: red; LINE-HEIGHT: 20px; FONT-FAMILY: monospace"><font face="新宋体">'bar'</font></span><span class="sh_symbol" style="COLOR: #8b0000; LINE-HEIGHT: 20px">;</span><span class="sh_comment" style="COLOR: #a52a2a; LINE-HEIGHT: 20px; FONT-STYLE: italic"><br>// if variable bar equals 'bar', foobar is the result of <br></span><span class="sh_comment" style="COLOR: #a52a2a; LINE-HEIGHT: 20px; FONT-STYLE: italic">// last executing statement: bar="foo-bar";</span><span class="sh_keyword" style="FONT-WEIGHT: bold; COLOR: blue; LINE-HEIGHT: 20px"><br>var</span> foobar <span class="sh_symbol" style="COLOR: #8b0000; LINE-HEIGHT: 20px">=</span> <span class="sh_predef_func" style="FONT-WEIGHT: bold; COLOR: #00008b; LINE-HEIGHT: 20px">eval</span><span class="sh_symbol" style="COLOR: #8b0000; LINE-HEIGHT: 20px">(</span><span class="sh_string" style="COLOR: red; LINE-HEIGHT: 20px; FONT-FAMILY: monospace"><font face="新宋体">'if(bar == "bar") {bar="foo-bar";} else {bar = "bar-foo";}'</font></span><span class="sh_symbol" style="COLOR: #8b0000; LINE-HEIGHT: 20px">);</span><span class="sh_predef_func" style="FONT-WEIGHT: bold; COLOR: #00008b; LINE-HEIGHT: 20px"><br>alert</span><span class="sh_symbol" style="COLOR: #8b0000; LINE-HEIGHT: 20px">(</span>foobar<span class="sh_symbol" style="COLOR: #8b0000; LINE-HEIGHT: 20px">);</span><span class="sh_comment" style="COLOR: #a52a2a; LINE-HEIGHT: 20px; FONT-STYLE: italic">// change the value</span>bar <span class="sh_symbol" style="COLOR: #8b0000; LINE-HEIGHT: 20px">=</span> <span class="sh_string" style="COLOR: red; LINE-HEIGHT: 20px; FONT-FAMILY: monospace"><font face="新宋体">'foo'</font></span><span class="sh_symbol" style="COLOR: #8b0000; LINE-HEIGHT: 20px">;</span><span class="sh_comment" style="COLOR: #a52a2a; LINE-HEIGHT: 20px; FONT-STYLE: italic"><br>// now our the last executed statement is: bar = "bar-foo";</span><span class="sh_comment" style="COLOR: #a52a2a; LINE-HEIGHT: 20px; FONT-STYLE: italic"><br>// therefore the value of variable foobar has been changed</span><span class="sh_comment" style="COLOR: #a52a2a; LINE-HEIGHT: 20px; FONT-STYLE: italic"><br>// into 'bar-foo'</span><br>foobar <span class="sh_symbol" style="COLOR: #8b0000; LINE-HEIGHT: 20px">=</span> <span class="sh_predef_func" style="FONT-WEIGHT: bold; COLOR: #00008b; LINE-HEIGHT: 20px">eval</span><span class="sh_symbol" style="COLOR: #8b0000; LINE-HEIGHT: 20px">(</span><span class="sh_string" style="COLOR: red; LINE-HEIGHT: 20px; FONT-FAMILY: monospace"><font face="新宋体">'if(bar == "bar") {bar="foo-bar";} else {bar = "bar-foo";}'</font></span><span class="sh_symbol" style="COLOR: #8b0000; LINE-HEIGHT: 20px">);</span><span class="sh_predef_func" style="FONT-WEIGHT: bold; COLOR: #00008b; LINE-HEIGHT: 20px"><br>alert</span><span class="sh_symbol" style="COLOR: #8b0000; LINE-HEIGHT: 20px">(</span>foobar<span class="sh_symbol" style="COLOR: #8b0000; LINE-HEIGHT: 20px">);</span>

JSON的格式

JSON的格式是由大括号和由冒号（：）构成的名值对所组成的。注意JSON格式与对象字面量 (object literals) 的区别：JSON的名字部分严格用引号+名字来表示。

举例说明

• 对象的字面量

<span style="FONT-SIZE: medium; LINE-HEIGHT: normal; FONT-FAMILY: Calibri; WHITE-SPACE: normal"><pre class="sh_sourceCode sh_javascript_dom"><span class="sh_keyword" style="FONT-WEIGHT: bold; COLOR: blue; LINE-HEIGHT: 20px">var</span> objectLiteral <span class="sh_symbol" style="COLOR: #8b0000; LINE-HEIGHT: 20px">=</span> <span class="sh_cbracket" style="COLOR: red; LINE-HEIGHT: 20px">{</span><br>  <span class="sh_predef_var" style="COLOR: #00008b; LINE-HEIGHT: 20px">name</span><span class="sh_symbol" style="COLOR: #8b0000; LINE-HEIGHT: 20px">:</span> <span class="sh_string" style="COLOR: red; LINE-HEIGHT: 20px; FONT-FAMILY: monospace"><font face="新宋体">"Objector.L"</font></span><span class="sh_symbol" style="COLOR: #8b0000; LINE-HEIGHT: 20px">,</span><br>  age<span class="sh_symbol" style="COLOR: #8b0000; LINE-HEIGHT: 20px">:</span> <span class="sh_string" style="COLOR: red; LINE-HEIGHT: 20px; FONT-FAMILY: monospace"><font face="新宋体">"24"</font></span><span class="sh_symbol" style="COLOR: #8b0000; LINE-HEIGHT: 20px">,</span><br>  special<span class="sh_symbol" style="COLOR: #8b0000; LINE-HEIGHT: 20px">:</span> <span class="sh_string" style="COLOR: red; LINE-HEIGHT: 20px; FONT-FAMILY: monospace"><font face="新宋体">"JavaScript"</font></span><span class="sh_symbol" style="COLOR: #8b0000; LINE-HEIGHT: 20px">,</span><br>  sayName<span class="sh_symbol" style="COLOR: #8b0000; LINE-HEIGHT: 20px">:</span> <span class="sh_keyword" style="FONT-WEIGHT: bold; COLOR: blue; LINE-HEIGHT: 20px">function</span><span class="sh_symbol" style="COLOR: #8b0000; LINE-HEIGHT: 20px">()</span> <span class="sh_cbracket" style="COLOR: red; LINE-HEIGHT: 20px">{</span><br>    <span class="sh_keyword" style="FONT-WEIGHT: bold; COLOR: blue; LINE-HEIGHT: 20px">return</span> <span class="sh_keyword" style="FONT-WEIGHT: bold; COLOR: blue; LINE-HEIGHT: 20px">this</span><span class="sh_symbol" style="COLOR: #8b0000; LINE-HEIGHT: 20px">.</span><span class="sh_predef_var" style="COLOR: #00008b; LINE-HEIGHT: 20px">name</span><span class="sh_symbol" style="COLOR: #8b0000; LINE-HEIGHT: 20px">;</span><br>  <span class="sh_cbracket" style="COLOR: red; LINE-HEIGHT: 20px">}</span><span class="sh_cbracket" style="COLOR: red; LINE-HEIGHT: 20px"><br>}</span><span class="sh_symbol" style="COLOR: #8b0000; LINE-HEIGHT: 20px">;</span>

• JSON对象

<span style="FONT-SIZE: medium; LINE-HEIGHT: normal; FONT-FAMILY: Calibri; WHITE-SPACE: normal"><pre class="sh_sourceCode sh_javascript_dom"><span class="sh_keyword" style="FONT-WEIGHT: bold; COLOR: blue; LINE-HEIGHT: 20px">var</span> jsonFormat <span class="sh_symbol" style="COLOR: #8b0000; LINE-HEIGHT: 20px">=</span> <span class="sh_cbracket" style="COLOR: red; LINE-HEIGHT: 20px">{<br></span>  <span class="sh_string" style="COLOR: red; LINE-HEIGHT: 20px; FONT-FAMILY: monospace"><font face="新宋体">"summary"</font></span><span class="sh_symbol" style="COLOR: #8b0000; LINE-HEIGHT: 20px">:</span> <span class="sh_string" style="COLOR: red; LINE-HEIGHT: 20px; FONT-FAMILY: monospace"><font face="新宋体">"Blogs"</font></span><span class="sh_symbol" style="COLOR: #8b0000; LINE-HEIGHT: 20px">,<br></span>  <span class="sh_string" style="COLOR: red; LINE-HEIGHT: 20px; FONT-FAMILY: monospace"><font face="新宋体">"blogrolls"</font></span><span class="sh_symbol" style="COLOR: #8b0000; LINE-HEIGHT: 20px">:</span> <span class="sh_symbol" style="COLOR: #8b0000; LINE-HEIGHT: 20px">[</span><br>    <span class="sh_cbracket" style="COLOR: red; LINE-HEIGHT: 20px">{<br></span>       <span class="sh_string" style="COLOR: red; LINE-HEIGHT: 20px; FONT-FAMILY: monospace"><font face="新宋体">"title"</font></span><span class="sh_symbol" style="COLOR: #8b0000; LINE-HEIGHT: 20px">:</span> <span class="sh_string" style="COLOR: red; LINE-HEIGHT: 20px; FONT-FAMILY: monospace"><font face="新宋体">"Explore JavaScript"</font></span><span class="sh_symbol" style="COLOR: #8b0000; LINE-HEIGHT: 20px">,</span><br>      <span class="sh_string" style="COLOR: red; LINE-HEIGHT: 20px; FONT-FAMILY: monospace"><font face="新宋体"> "link"</font></span><span class="sh_symbol" style="COLOR: #8b0000; LINE-HEIGHT: 20px">:</span> <font face="新宋体"><span class="sh_string" style="COLOR: red; LINE-HEIGHT: 20px; FONT-FAMILY: monospace">"http://example.com/"</span><br></font>    <span class="sh_cbracket" style="COLOR: red; LINE-HEIGHT: 20px">}</span><span class="sh_symbol" style="COLOR: #8b0000; LINE-HEIGHT: 20px">,<br></span>    <span class="sh_cbracket" style="COLOR: red; LINE-HEIGHT: 20px">{</span> <br>      <span class="sh_string" style="COLOR: red; LINE-HEIGHT: 20px; FONT-FAMILY: monospace"><font face="新宋体"> "title"</font></span><span class="sh_symbol" style="COLOR: #8b0000; LINE-HEIGHT: 20px">:</span> <span class="sh_string" style="COLOR: red; LINE-HEIGHT: 20px; FONT-FAMILY: monospace"><font face="新宋体">"Explore JavaScript"</font></span><span class="sh_symbol" style="COLOR: #8b0000; LINE-HEIGHT: 20px">,</span><br>      <span class="sh_string" style="COLOR: red; LINE-HEIGHT: 20px; FONT-FAMILY: monospace"><font face="新宋体"> "link"</font></span><span class="sh_symbol" style="COLOR: #8b0000; LINE-HEIGHT: 20px">:</span> <font face="新宋体"><span class="sh_string" style="COLOR: red; LINE-HEIGHT: 20px; FONT-FAMILY: monospace">"http://example.com/"</span><br></font>    <span class="sh_cbracket" style="COLOR: red; LINE-HEIGHT: 20px">}</span><br>  <span class="sh_symbol" style="COLOR: #8b0000; LINE-HEIGHT: 20px">]</span><span class="sh_cbracket" style="COLOR: red; LINE-HEIGHT: 20px"><br>}</span><span class="sh_symbol" style="COLOR: #8b0000; LINE-HEIGHT: 20px">;</span>

eval和JSON

由于Ajax的兴起，JSON这种轻量级的数据格式作为客户端与服务器之间的传输格式逐渐地流行起来，进而出现的问题是如何将服务器端构建好的JSON数据转化为可用的JavaScript对象。利用eval函数无疑是一种简单而直接的方法。在转化的时候需要将JSON字符串的外面包装一层圆括号：

<span style="FONT-SIZE: medium; LINE-HEIGHT: normal; FONT-FAMILY: Calibri; WHITE-SPACE: normal"><pre class="sh_sourceCode sh_javascript_dom"><span class="sh_keyword" style="FONT-WEIGHT: bold; COLOR: blue; LINE-HEIGHT: 20px">var</span> jsonObject <span class="sh_symbol" style="COLOR: #8b0000; LINE-HEIGHT: 20px">=</span> <span class="sh_predef_func" style="FONT-WEIGHT: bold; COLOR: #00008b; LINE-HEIGHT: 20px">eval</span><span class="sh_symbol" style="COLOR: #8b0000; LINE-HEIGHT: 20px">(</span><span class="sh_string" style="COLOR: red; LINE-HEIGHT: 20px; FONT-FAMILY: monospace"><font face="新宋体">"("</font></span> <span class="sh_symbol" style="COLOR: #8b0000; LINE-HEIGHT: 20px">+</span> jsonFormat <span class="sh_symbol" style="COLOR: #8b0000; LINE-HEIGHT: 20px">+</span> <span class="sh_string" style="COLOR: red; LINE-HEIGHT: 20px; FONT-FAMILY: monospace"><font face="新宋体">")"</font></span><span class="sh_symbol" style="COLOR: #8b0000; LINE-HEIGHT: 20px">);</span>

为什么要加括号？

加上圆括号的目的是迫使eval函数在评估JavaScript代码的时候强制将括号内的表达式（expression）转化为对象，而不是作为语句（statement）来执行。举一个例子，例如对象字面量{}，如若不加外层的括号，那么eval会将大括号识别为JavaScript代码块的开始和结束标记，那么{}将会被认为是执行了一句空语句。所以下面两个执行结果是不同的：

<span style="FONT-SIZE: medium; LINE-HEIGHT: normal; FONT-FAMILY: Calibri; WHITE-SPACE: normal"><pre class="sh_sourceCode sh_javascript_dom"><span class="sh_predef_func" style="FONT-WEIGHT: bold; COLOR: #00008b; LINE-HEIGHT: 20px">alert</span><span class="sh_symbol" style="COLOR: #8b0000; LINE-HEIGHT: 20px">(</span><span class="sh_predef_func" style="FONT-WEIGHT: bold; COLOR: #00008b; LINE-HEIGHT: 20px">eval</span><span class="sh_symbol" style="COLOR: #8b0000; LINE-HEIGHT: 20px">(</span><span class="sh_string" style="COLOR: red; LINE-HEIGHT: 20px; FONT-FAMILY: monospace"><font face="新宋体">"{}"</font></span><span class="sh_symbol" style="COLOR: #8b0000; LINE-HEIGHT: 20px">);</span> <span class="sh_comment" style="COLOR: #a52a2a; LINE-HEIGHT: 20px; FONT-STYLE: italic">// return undefined</span><span class="sh_predef_func" style="FONT-WEIGHT: bold; COLOR: #00008b; LINE-HEIGHT: 20px"><br>alert</span><span class="sh_symbol" style="COLOR: #8b0000; LINE-HEIGHT: 20px">(</span><span class="sh_predef_func" style="FONT-WEIGHT: bold; COLOR: #00008b; LINE-HEIGHT: 20px">eval</span><span class="sh_symbol" style="COLOR: #8b0000; LINE-HEIGHT: 20px">(</span><span class="sh_string" style="COLOR: red; LINE-HEIGHT: 20px; FONT-FAMILY: monospace"><font face="新宋体">"({})"</font></span><span class="sh_symbol" style="COLOR: #8b0000; LINE-HEIGHT: 20px">);</span><span class="sh_comment" style="COLOR: #a52a2a; LINE-HEIGHT: 20px; FONT-STYLE: italic">// return object[Object]</span>

JSON格式的名字部分为什么要加引号？

因为eval函数会将{foo:”bar”}解释成合法的JavaScript语句，而非表达式。但是人们往往想要的是让eval将这段代码解释成一个对象。所以JSON格式会强制你去在名字的外侧加上引号再结合圆括号，这样eval就不会错误的将JSON解释成代码块。

举例说明

• eval错误解析语义

<span style="FONT-SIZE: medium; LINE-HEIGHT: normal; FONT-FAMILY: Calibri; WHITE-SPACE: normal"><pre class="sh_sourceCode sh_javascript_dom"><span class="sh_predef_func" style="FONT-WEIGHT: bold; COLOR: #00008b; LINE-HEIGHT: 20px">alert</span><span class="sh_symbol" style="COLOR: #8b0000; LINE-HEIGHT: 20px">(</span><span class="sh_predef_func" style="FONT-WEIGHT: bold; COLOR: #00008b; LINE-HEIGHT: 20px">eval</span><span class="sh_symbol" style="COLOR: #8b0000; LINE-HEIGHT: 20px">(</span><span class="sh_string" style="COLOR: red; LINE-HEIGHT: 20px; FONT-FAMILY: monospace"><font face="新宋体">'{foo:"bar"}'</font></span><span class="sh_symbol" style="COLOR: #8b0000; LINE-HEIGHT: 20px">));</span>   <span class="sh_comment" style="COLOR: #a52a2a; LINE-HEIGHT: 20px; FONT-STYLE: italic">// return "bar", incorrect</span>

• eval正确解析JSON

<span style="FONT-SIZE: medium; LINE-HEIGHT: normal; FONT-FAMILY: Calibri; WHITE-SPACE: normal"><pre class="sh_sourceCode sh_javascript_dom"><span class="sh_predef_func" style="FONT-WEIGHT: bold; COLOR: #00008b; LINE-HEIGHT: 20px">alert</span><span class="sh_symbol" style="COLOR: #8b0000; LINE-HEIGHT: 20px">(</span><span class="sh_predef_func" style="FONT-WEIGHT: bold; COLOR: #00008b; LINE-HEIGHT: 20px">eval</span><span class="sh_symbol" style="COLOR: #8b0000; LINE-HEIGHT: 20px">(</span><span class="sh_string" style="COLOR: red; LINE-HEIGHT: 20px; FONT-FAMILY: monospace"><font face="新宋体">'({"foo": "bar"})'</font></span><span class="sh_symbol" style="COLOR: #8b0000; LINE-HEIGHT: 20px">));</span> <span class="sh_comment" style="COLOR: #a52a2a; LINE-HEIGHT: 20px; FONT-STYLE: italic">// return JSON object, correct</span>

结论

理解eval的工作原理和json的严格的限定格式，合理结合eval和json应用于JavaScript的数据传递和对象转换。

following this format:

<span style="FONT-SIZE: medium; LINE-HEIGHT: normal; FONT-FAMILY: Calibri; WHITE-SPACE: normal"><pre class="sh_sourceCode sh_javascript_dom"><span class="sh_predef_func" style="FONT-WEIGHT: bold; COLOR: #00008b; LINE-HEIGHT: 20px">eval</span><span class="sh_symbol" style="COLOR: #8b0000; LINE-HEIGHT: 20px">(</span><span class="sh_string" style="COLOR: red; LINE-HEIGHT: 20px; FONT-FAMILY: monospace"><font face="新宋体">'{'</font></span> <span class="sh_symbol" style="COLOR: #8b0000; LINE-HEIGHT: 20px">+</span> jsonString <span class="sh_symbol" style="COLOR: #8b0000; LINE-HEIGHT: 20px">+</span> <span class="sh_string" style="COLOR: red; LINE-HEIGHT: 20px; FONT-FAMILY: monospace"><font face="新宋体">')'</font></span><span class="sh_symbol" style="COLOR: #8b0000; LINE-HEIGHT: 20px">);</span>