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 linenThe second line");

如果需要使用製表符，可以用t：

複製程式碼 程式碼如下:

//Use t in alert()
alert("Alext50t34nBobt59t38");

變數的使用

除了顯示靜態字串外，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("Test Text");

輸出結果並不是加粗的」Test Text」。

如果確實需要改變警示框的樣式，可以有以下兩種方案：

1.在alert()函數中使用Unicode字元。這種方案的好處是實現起來非常簡單，但其限制也很明顯：Unicode字元的表現力非常有限。

2.不使用alert()函數，轉而用HTML元件模擬彈出框(例如使用jQuery UI Dialog)。這種方案的優點是彈出框的表現力會很強，但對其的使用會增加前端程式碼的複雜度。

結語

alert()函數可以用來向使用者警告訊息，也可以用來偵錯程式。對於前者，使用jQuery UI Dialog等元件能大幅增加表現力及使用者體驗；而對於後者，由於alert()彈出框會阻斷JavaScript程式碼的執行，因此在很多情況下，使用console.log()來對程式進行調試是一種更好的方案。