JavaScript中的alert()函數提示詳解_javascript技巧

在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()來對程式進行調試是一種更好的方案。