JavaScript中的alert()函數使用技巧詳解

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

更多JavaScript中的alert()函數使用技巧詳解相關文章請關注PHP中文網！