JavaScript 的 eval() 函式

如果你有一段字串想要將其轉換為程式碼執行,可以調用 eval() 函式來達到這個目的。考慮以下的程式碼:

alert("HELLO");

這一段程式碼在畫面上顯示 HELLO 訊息字串,現在我們將其寫成字串:

var s = 'alert("HELLO")';

這一次 alert("HELLO") 變成單純的字串,儲存於 s 變數當中,由於是字串格式自然無法執行,如果要將這段字串視為程式碼,可以將其丟入 eval() 函式中當作參數即可,如下式:

eval ('alert("HELLO")');

或是直接將變數丟進去:

eval(s);

以上兩行都會執行,並且於畫面上顯示 HELLO 訊息字串。

在一般網頁的開發中, eval() 的運用並不常見,不過它的威力強大,例如你可以將一段特定的 JavaScript 以字串格式儲存至資料庫,在需要的時候將其取出之後,透過 eval() 執行以建立動態內容,利用這種技巧,你可以將網頁的特定內容或是功能儲存在資料庫中。
以下利用一個簡單的範例說明 eval() 的用途,首先配置兩個按鈕:

<button id="logx" type="button" >log x</button>
<button id="alertx" type="button" >alert x</button>  

接下來建立兩個全域變數進行測試:

var x=0;
var alertstring = 'console.log(++x)';

第一行 x 初始化為 0 ,第二行則是一段以字串格式表示的程式碼,它將 x 加 1 之後,於控制台輸出。於上述配置的兩個按鈕,分別註冊 click 事件處理器:

window.onload = function () {
    document.getElementById('logx').addEventListener(
        'click',
        function () { eval(alertstring); },
        false);
    document.getElementById('alertx').addEventListener(
        'click',
        function () { alert(x); },
        false);
};   

logx 按鈕在按下時,調用 eval() 將 alertstring 字串轉換成為程式碼執行,而 alertx 則顯示 x 的值。在瀏覽器執行,開啟控制台,連續按下 log x 按鈕,你會發現其中的變數值不斷的增加輸出,這是 eval() 執行的效果。


而以下的截圖則是按下 alert x 按鈕之後顯示目前 x 的值,它是 eval() 執行字串數次之後的結果。

沒有留言: