快捷導(dǎo)航

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

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

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

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

//Use window object's alert() function

window.alert("sample text");

這一寫(xiě)法可以簡(jiǎn)化為直接使用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é)果將會(huì)是”Bob is 42 years old.”；但實(shí)際上alert()函數(shù)并不支持這么做，因此最終的輸出結(jié)果為”%s is %d years old.”。

彈出窗口樣式

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

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

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

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

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

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

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

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

結(jié)語(yǔ)

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

您可能感興趣的文章: