JavaScript中 eval函數

義：它是一種接受字符串作為參數，并且可以將接受的字符串轉換成js表達式并且立即執行該表達式；

eval（string）;

如果是一個表達式，eval函數將執行表達式
如果是字符串，會先轉換成js語句然后執行

 eval('var num=10;')
 var arr=eval('[1,2,3]')
 console.log(num); //10
 console.log(typeof arr); //Object

需求：將對象轉成eval函數

avaScript —— 極簡主義

點關注，不迷路~

天天都是肉，也會有吃膩的那天。本篇文章我們就來一個小插曲兒，來調調情兒，調調味兒；其實主要是看到這個兩個知識點，怕后續會忘掉把它分享出來，所以活在當下，就好比我遇到不懂的或疑惑的問題就會立刻百度一下，否則這件事件就會被擱置，這也是一種好的學習習慣哦~

1、巧妙使用eval()

1.1) eval是做什么的？

它是把代碼字符串解析成JS代碼并運行該代碼。

str='console.log(123)'
eval(str);
打印結果：123

但是，我們不建議使用eval，原因有兩點：一是不安全(++number運算會改變全局變量number)；二是非常消耗性(2次，1次解析成js語句，1次執行)；

1.2) 如何巧妙使用eval()？

在將json字符串轉換成json對象的時候使用eval。比如：發起一個Ajax請求，然后服務器返回一個類似'{x:1,y:1}'結構的json字符串

str='{"name":"anita","age":"10"}';
// 如果eval的時候不加括號還會報腳本錯誤,這是為什么呢？
result=eval('(' + str + ')');
console.log(typeof str, typeof result, result)
結果: string object {name: "anita", age: "10"}

為什么eval要添加括號？

原因：eval本身的問題。由于json是以{}的方式來開始以及結束的，在JS中，它會被當成一個語句塊來處理，所以必須強制性的將它轉換成一種表達式。加上圓括號的目的是迫使eval函數在處理JavaScript代碼的時候強制將括號內的表達式(expression)轉化為對象，而不是作為語句(statement)來執行。舉一個例子，例如對象字面量{}，如若不加外層的括號，那么eval會將大括號識別為JavaScript代碼塊的開始和結束標記，那么{}將會被認為是執行了一句空語句。

console.log(eval("{}"); // undefined 
console.log(eval("({})");// object[Object]

小結：JSON.parse的功能和eval一樣，不建議使用eval。僅作了解，現在基本不用了。

2、Doctype、嚴格模式與混雜模式

<!Doctype html> 文檔聲明，位于文檔中的最前面的位置，處于<html>標簽之前。此標簽告知瀏覽器文檔使用哪種HTML或XHTML規范。用于告知瀏覽器以何種模式來渲染文檔。

2.1) 嚴格模式：標準模式，頁面排版和js解析是以該瀏覽器支持的最高標準(W3C)來執行。

2.2) 混雜模式：quirks模式，不嚴格按照標準模式執行，主要用以兼容舊的瀏覽器，向后兼容。兼容低版本瀏覽器的行為以防止老站點無法工作。

兩者的區別：總體會有布局、樣式解析和腳本解析三方面的區別。

1)、盒模型：在W3C標準中，如果設置一個元素的寬度和高度，值得是元素內容的寬度和高度，而在Quirks模式下，IE的寬度和高度還包含了padding和border。

2)、設置行內元素的寬高：在標準模式下，給<span>等行內元素設置width和height都不會生效，而在quirks模式下，則會生效。

3)、設置百分比的高度：在標準模式下，一個元素的高度尤其包含的內容決定，如果父元素沒有設置高度，子元素設置一個百分比的高度是無效的。

4)、margin:0 auto設置水平居中：使用margin:0 auto在標準模式下可以使元素水平居中，但在quirks模式下卻會失效。解決辦法：用text-align屬性：

body{text-align:center;}

#content{text-align:left;}

5)、quirks模式下設置圖片的padding會失效

6)、quirks模式下Table中的字體屬性不能繼承上層的設置

7)、quirks模式下white-space:pre（保留空白）會失效，(預格式化的文本, 保留換行或空格)

3、link和import的區別

頁面中使用CSS的方式主要有3種:

1) 行內樣式——在行內添加定義style屬性值;

2) 內聯樣式——頁面頭部內嵌調用；

3) 外部樣式——外面鏈接調用；

3.1) 其中外面引用有兩種：link和@import。

HTML代碼
<link rel="stylesheet" rel="stylesheet" href="CSS文件" type="text/css" /> 
 
HTML代碼
<style type="text/css"> 
@import url("CSS文件"); 
</style>

外面引用兩者的區別：

區別1：link是XHTML標簽，除了加載CSS外，還可以定義RSS等其他事務，比如：設置rel引入字體圖標庫；@import屬于CSS范疇，只能加載CSS。

<link rel="shortcut icon" href="/favicon.ico" type="image/x-icon" />

區別2：link引用CSS時，在頁面載入時同時加載；@import需要頁面網頁完全載入以后加載。

區別3：link是XHTML標簽，無兼容問題；@import是在CSS2.1提出的，低版本的瀏覽器不支持。

區別4：link支持使用Javascript控制DOM去改變樣式；而@import不支持。

所以，一般情況下建議使用link，但性能優化需要按需加載時可以考慮使用@imort，后續會有專題文章來講解性能優化。

小結：其他事務、同時加載、兼容、控制DOM。

3.2) URL、src 、 href 的區別

區別：

URL 是統一資源定位器，用于定位互聯網上的各種資源，如web頁面。

http://segmentfault.com/html/index.asp
<img src="../abc" />

href 是引用，建立資源關系，常用在link、a標簽中；不會暫停瀏覽器的渲染。

<link href="reset.css" rel="stylesheet"/>

src 是嵌入，替換，常用在img、script、iframe標簽中；會暫停瀏覽器的渲染，放在底部。img標簽頁與此類似，瀏覽器暫停加載直到提取和加載圖像。

<script src="script.js"></script>

小結：

URL不是屬性，src 與 href均是屬性；

建立資源關系 VS 替換；

是否暫停瀏覽器渲染。

val函數的工作原理

eval函數會評估一個給定的含有JavaScript代碼的字符串，并且試圖去執行包含在字符串里的表達式或者一系列的合法的JavaScript語句。eval函數將把最后一個表達式或者語句所包含的值或引用作為返回值。

舉例說明

eval評估JavaScript表達式

var bar='bar';

var foobar=eval('"foo" + bar');

alert(foobar);

eval評估JavaScript語句

var bar='bar';

// if variable bar equals 'bar', foobar is the result of // last executing statement: bar="foo-bar";

var foobar=eval('if(bar=="bar") {bar="foo-bar";} else {bar="bar-foo";}');

alert(foobar);// change the valuebar='foo';

// now our the last executed statement is: bar="bar-foo";

// therefore the value of variable foobar has been changed

// into 'bar-foo'foobar=eval('if(bar=="bar") {bar="foo-bar";} else {bar="bar-foo";}');

alert(foobar);

JSON的格式

JSON的格式是由大括號和由冒號（：）構成的名值對所組成的。注意JSON格式與對象字面量 (object literals) 的區別：JSON的名字部分嚴格用引號+名字來表示。

舉例說明

對象的字面量

var objectLiteral={ name: "Objector.L", age: "24", special: "JavaScript", sayName: function() { return this.name; }

};

JSON對象

var jsonFormat={ "summary": "Blogs", "blogrolls": [ { "title": "Explore JavaScript", "link": "http://example.com/" }, { "title": "Explore JavaScript", "link": "http://example.com/" } ]

};

eval和JSON

由于Ajax的興起，JSON這種輕量級的數據格式作為客戶端與服務器之間的傳輸格式逐漸地流行起來，進而出現的問題是如何將服務器端構建好的JSON數據轉化為可用的JavaScript對象。利用eval函數無疑是一種簡單而直接的方法。在轉化的時候需要將JSON字符串的外面包裝一層圓括號：

var jsonObject=eval("(" + jsonFormat + ")");

為什么要加括號？

加上圓括號的目的是迫使eval函數在評估JavaScript代碼的時候強制將括號內的表達式（expression）轉化為對象，而不是作為語句（statement）來執行。舉一個例子，例如對象字面量{}，如若不加外層的括號，那么eval會將大括號識別為JavaScript代碼塊的開始和結束標記，那么{}將會被認為是執行了一句空語句。所以下面兩個執行結果是不同的：

alert(eval("{}"); // return undefined

alert(eval("({})");// return object[Object]

JSON格式的名字部分為什么要加引號？

因為eval函數會將{foo:”bar”}解釋成合法的JavaScript語句，而非表達式。但是人們往往想要的是讓eval將這段代碼解釋成一個對象。所以JSON格式會強制你去在名字的外側加上引號再結合圓括號，這樣eval就不會錯誤的將JSON解釋成代碼塊。

舉例說明

eval錯誤解析語義

alert(eval('{foo:"bar"}')); // return "bar", incorrect

eval正確解析JSON

alert(eval('({"foo": "bar"})')); // return JSON object, correct

結論

理解eval的工作原理和json的嚴格的限定格式，合理結合eval和json應用于JavaScript的數據傳遞和對象轉換。

following this format:

eval('{' + jsonString + ')');

在線咨詢

上一篇：《Web前端技術H5+CSS3》第二章 HTML基礎
下一篇：編程語言PHP 是什么？

您的項目需求

*請認真填寫需求信息，我們會在24小時內與您取得聯系。

整合營銷服務商

JavaScript中 eval函數

1、巧妙使用eval()

2、Doctype、嚴格模式與混雜模式

3、link和import的區別

您的項目需求