在JavaScript代碼中,可以使用window對象的alert()函數來顯示一段文本,從而進行程序的調試,或者向用戶警示相關信息:
復制代碼 代碼如下:
//Use window object's alert() function
window.alert("sample text");
這一寫法可以簡化為直接使用alert()函數:
復制代碼 代碼如下:
//Simplified alert() usage
alert("sample text");
如果需要顯示帶換行的文本,可以使用\n:
復制代碼 代碼如下:
//Use \n in alert()
alert("The first line\nThe second line");
如果需要使用制表符,可以用\t:
復制代碼 代碼如下:
//Use \t in alert()
alert("Alex\t50\t34\nBob\t59\t38");
變量的使用
除了顯示靜態字符串外,alert()函數也可以接受變量,並將變量值與其它字符串進行拼接:
復制代碼 代碼如下:
//Use variable in alert()
var word = "life";
alert("The magic word is: " + word + ". Don't panic.");
遺憾的是,盡管alert()函數可以接受變量,但能做的也僅止於這種字符串拼接操作;與另一種調試方法console.log()相反,alert()函數並不接受向字符串傳參數的做法。以下述代碼為例:
復制代碼 代碼如下:
//Try to use parameter in alert(), will fail
var name = "Bob";
var years = 42;
alert("%s is %d years old.", name, years);
如果alert()函數接受字符串傳參,那麼預期的輸出結果將會是”Bob is 42 years old.”;但實際上alert()函數並不支持這麼做,因此最終的輸出結果為”%s is %d years old.”。
彈出窗口樣式
由於alert()函數所使用的彈出框是浏覽器系統對象而不是網頁文檔對象,因此無法通過在alert()函數中使用HTML標簽來定義彈出框的樣式 — HTML標簽將會被原封不動的進行顯示。對於以下代碼:
復制代碼 代碼如下:
//Try to use HTML tags in alert(), will fail
alert("<b>Test Text</b>");
輸出結果並不是加粗的”Test Text”。
如果確實需要改變警示框的樣式,可以有以下兩種方案:
1.在alert()函數中使用Unicode字符。這種方案的好處是實現起來非常簡單,但其局限性也很明顯:Unicode字符的表現力非常有限。
2.不使用alert()函數,轉而用HTML組件模擬彈出框(比如使用jQuery UI Dialog)。這種方案的優勢是彈出框的表現力會很強,但對其的使用會增加前端代碼的復雜度。
結語
alert()函數可以用來向用戶警示信息,也可以用來調試程序。對於前者,使用jQuery UI Dialog等組件能大幅增加表現力及用戶體驗;而對於後者,由於alert()彈出框會阻斷JavaScript代碼的執行,因此在很多情況下,使用console.log()來對程序進行調試是一種更好的方案。