快捷導(dǎo)航

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

更新時間：2014年12月29日 09:47:59 投稿：junjie

這篇文章主要介紹了JavaScript中的alert()函數(shù)使用技巧詳解,本文講解了普通彈出、帶換行的文本、使用制表符、使用變量、使用樣式等選擇,需要的朋友可以參考下

在JavaScript代碼中，可以使用window對象的alert()函數(shù)來顯示一段文本，從而進(jìn)行程序的調(diào)試，或者向用戶警示相關(guān)信息：

//Use window object's alert() function

window.alert("sample text");

這一寫法可以簡化為直接使用alert()函數(shù)：

復(fù)制代碼代碼如下:

//Simplified alert() usage

alert("sample text");

如果需要顯示帶換行的文本，可以使用\n：

復(fù)制代碼代碼如下:

//Use \n in alert()

alert("The first line\nThe second line");

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

復(fù)制代碼代碼如下:

//Use \t in alert()

alert("Alex\t50\t34\nBob\t59\t38");

變量的使用

除了顯示靜態(tài)字符串外，alert()函數(shù)也可以接受變量，并將變量值與其它字符串進(jìn)行拼接：

復(fù)制代碼代碼如下:

//Use variable in alert()

var word = "life";

alert("The magic word is: " + word + ". Don't panic.");

遺憾的是，盡管alert()函數(shù)可以接受變量，但能做的也僅止于這種字符串拼接操作；與另一種調(diào)試方法console.log()相反，alert()函數(shù)并不接受向字符串傳參數(shù)的做法。以下述代碼為例：

復(fù)制代碼代碼如下:

//Try to use parameter in alert(), will fail

var name = "Bob";

var years = 42;

alert("%s is %d years old.", name, years);

如果alert()函數(shù)接受字符串傳參，那么預(yù)期的輸出結(jié)果將會是”Bob is 42 years old.”；但實際上alert()函數(shù)并不支持這么做，因此最終的輸出結(jié)果為”%s is %d years old.”。

彈出窗口樣式

由于alert()函數(shù)所使用的彈出框是瀏覽器系統(tǒng)對象而不是網(wǎng)頁文檔對象，因此無法通過在alert()函數(shù)中使用HTML標(biāo)簽來定義彈出框的樣式 — HTML標(biāo)簽將會被原封不動的進(jìn)行顯示。對于以下代碼：

復(fù)制代碼代碼如下:

//Try to use HTML tags in alert(), will fail

alert("<b>Test Text</b>");

輸出結(jié)果并不是加粗的”Test Text”。

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

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

2.不使用alert()函數(shù)，轉(zhuǎn)而用HTML組件模擬彈出框(比如使用jQuery UI Dialog)。這種方案的優(yōu)勢是彈出框的表現(xiàn)力會很強，但對其的使用會增加前端代碼的復(fù)雜度。

結(jié)語

alert()函數(shù)可以用來向用戶警示信息，也可以用來調(diào)試程序。對于前者，使用jQuery UI Dialog等組件能大幅增加表現(xiàn)力及用戶體驗；而對于后者，由于alert()彈出框會阻斷JavaScript代碼的執(zhí)行，因此在很多情況下，使用console.log()來對程序進(jìn)行調(diào)試是一種更好的方案。

您可能感興趣的文章: