Javascript執行個體教程(17) 使用字串函數

javascript|函數|教程|字串 字串對象提供了許多方法，但是很少的程式設計人員充分利用它們，這對於一個程式員來說，不能不說這是一種缺陷。字串提供的方法可以用於操作字元、產生HTML標籤以及搜尋字串等等。

下面首先說說什麼是字串。在JavaScript語言中，字串就是一種對象。就象在Java中，它們不是作為一系列的字元被儲存的，所以字串的操作必須使用內建的構造器和設定函數來完成。在後來的版本中有了字串構造器和更多的關於對象的概念。在這個層次上說，字串是由字母而不是數字組成的變數，這就是字串的概念。

舉個例子，一些有效字串為"Hello", "Bob", "Bob2", "33", "33.3"，而33或者33.3就不是字串了。所有的字串有一個共同的屬性，稱為長度，這個長度返回了字串中字元的個數。

最常用的字串方法是：indexOf()、charAt()和substring()。因為這幾個方法在JavaScript中經常出現，所以下面我對它們進行詳細說明：

indexOf()函數

這個函數允許你判斷一個字串是否存在於一個更長的字串中以及它所處的位置。它等價於C語言中的strstr函數以及Visual Basic語言中的inStr函數。這個方法也有一個相應的函數：lastIndexOf()，這個函數字串的另外一端搜尋。

就象函數的名字所意味的，返回數值表明字串在所搜尋字串中的位置。如果在被搜尋的字串中沒有找到要尋找的字串就返回-1。這裡要注意，在JavaScript中-1是一個普通的整數，而不是一個布爾型(Boolen)的數。以下是具體例子：

var myString = "Have a nice day!";

alert(myString.indexOf("a")); //這裡返回1

alert(myString.lastIndexOf("a")); // 這裡返回 13

這裡還需要再提醒一次，在JavaScript中的數組的索引是從0開始，這跟C語言是遺言的。所以上面的語句alert(myString.indexOf("a"))是返回1，因為”a” 處於字串"Have a nice day!"的第二個位置。

細心一點，你可能會發現字串"Have a nice day!"還有一個字元"a"，那怎麼才能找到第二個字母"a"呢？這是一個很好的問題，為了做到這一點，我們必須再介紹這個函數的第二個參數。第二個參數是一個整數，它指示了字串中開始搜尋的位置。

為了綜合以上的知識，下面對代碼進行一些來找到所有字元"a"，具體代碼如下：

var myString = "Have a nice day!";

var index = myString.indexOf("a");

while (index != -1) {

alert(index);

index = myString.indexOf("a", index + 1);
// start search after last match found

}

下面詳細解釋一下這段代碼：變數index被初始化為第一個"a"所在的位置（如果沒有"a"，那麼變數index就為-1）。然後再給出一個迴圈，條件是index!=-1。在每次的迴圈中，我們將變數index加1，即從找到的"a"後面第一個字元開始繼續尋找，直至將所有的字元"a"找到為止。當再也沒有字元"a"在字串變數mySring中找到的時候，就返回-1值，此時index就等於-1，不滿足迴圈條件index!=-1，故導致迴圈結束。而alert(index)語句的輸出為：1，5，13。

在這個例子中我們只是展示indexOf()進行單一字元的搜尋。如果你經常使用這個函數，你會發現它可以搜尋任意的字元或者字串。

charAt()函數

這個函數返回在字串中字元處在給定的位置。從本質上講，它是substring()方法的一個特例，但是它也有自己的用途。如果你原來是個C語言程式員或者其它相近的語言的程式員，那麼你就能理解當引用字元的時候，可以利用string.charAt(index)來代替string[index]。

下面我們來在一個表單輸入中使用這個函數。表單中有email地址，當然這個email地址要限制為字元、數字以及一個"@"符號。我們可以一次性講字串分列為單個字元來對它進行強制。詳細代碼如下：

<SCRIPT language="JavaScript"> <!-- Hide from older browsers

var parsed = true;

var validchars = "abcdefghijklmnopqrstuvwxyz0123456789@.-";

var email = prompt("What is your email address?", "nobody@nowhere.com");

for (var i=0; i < email.length; i++) {

var letter = email.charAt(i).toLowerCase();

if (validchars.indexOf(letter) != -1)

continue;

alert("Invalid character: " + letter);

parsed = false;

break;

}

if (parsed) alert("Your email address contains all valid characters.");

// Stop hiding -->

</SCRIPT>



(圖1)

如圖1所示。你可以按下”check Email”按鈕，此時就會彈出一個對話方塊，如圖2所示。



（圖2）

你可以在上面隨便填入一個email地址，然後點擊”確定”鍵。接著還會彈出一個檢查Email地址的結果。加入你輸入email地址：purple@pconline.com.cn之後，你就會看到如圖3所示的結果。如果你輸入：ok#pconline.com.cn就會出現如圖4所示的結果，因為#是一個無效的字元。



（圖3）



(圖4)

以下將詳細解釋上面這段代碼：

以上的例子使用了一些字串的函數、迴圈語句以及Boolean（布爾）運算。所有的這些在前面的教程中都有提及，當然除了toLowerCase()函數，這個函數下面再介紹。

以上的代碼實際上很簡單，只不過是想測試一下email地址中的每一個字元是不是一個有效字元而已 。但是實現過程看起來有點笨拙，不象C語言或者Perl語言那樣簡單。從本質上講，我們是使用charAt()來迴圈瀏覽email地址的字串以提取出無效的字元。

如果字元是有效，那就繼續迴圈；如果字元是無效的，就會彈出一個警告視窗說明那個字元是無效的，此時在設定parsed=false之後使用break語句來結束for迴圈。

當迴圈存在，我們可以檢查標誌parsed看是否email是有效。如果parsed為true，那麼訊息將被顯示。

點擊 此處去測試頁面
substring()函數

這個函數通常使用於提取字串的任何部分。它的參數是'start' 和'end'。開始的數值是第一個字元的索引，結束數值是返回部分之後的第一個字元的索引。你可能聽起來會覺得雲裡霧裡的，但是一個最好的記憶方法是：返回字串的長度等於end-start。

如果第二個參數省略了，那麼它預設為直到字串的結束。下面是幾個例子：

var str = "This is a string";

str.substring(1, 3); //結果為hi

str.substring(3, 1); //結果為hi

str.substring(0, 4); //結果為This

str.substring(8); //結果為hi

str.substring(8, 8); //結果為空白

上面的第二個例子是說明了當start>end的時候，那麼這兩個參數自動轉換.最後的例子顯示了：當start等於end的時候，返回數值為空白字串。

字元格式設定（HTML）

下面介紹JavaScript中最少使用的函數。雖然它們並不是十分有用，但至少它們為你的代碼增加一些裝飾。這些方法從字元對象中建立HTML代碼用於顯示在網頁上。

str.anchor("anchor1")	<A NAME="anchor1">This is a string</A>	This is a string
str.big()	<BIG>This is a string</BIG>	This is a string
str.blink()	<BLINK>This is a string</BLINK >	This is a string
str.bold()	<B>This is a string</B>	This is a string
str.fixed()	<TT>This is a string</TT>	This is a string
str.fontcolor("darkred")	<FONT COLOR="darkred">This is a string</FONT>	This is a string
str.fontsize(5)	<FONT SIZE="5">This is a string</FONT>	This is a string
str.italics()	<I>This is a string</I>	This is a string
str.link("index.html")	<A HREF="index.html">This is a string</A>	This is a string
str.small()	<SMALL>This is a string</SMALL>	This is a string
str.strike()	<STRIKE>This is a string</STRIKE>	This is a string
str.sub()	<SUB>This is a string</SUB>	This is a string
str.sup()	<SUP>This is a string</SUP>	This is a string
str.toLowerCase()	this is a string	this is a string
str.toUpperCase()	THIS IS A STRING	THIS IS A STRING

上表中最後的兩個例子不是與HTML特定相關的，但是它們作為一種格式工具是很有用的。所有的這些方法可以應用到字串中來建立一個定製的格式。
下面再給出一個例子： <BODY>

<SCRIPT language="JavaScript">

<!-- Hide from older browsers

var heading = prompt("Please enter a heading", "Test Heading");

var colour = prompt("Please enter a colour", "darkred");

document.write(heading.fontsize(7).fontcolor
(colour).bold().toUpperCase());

// Stop hiding -->

</SCRIPT>

</BODY>



(圖5)

這時你按下如圖5所示的按鈕，就可以彈出如圖6的對話方塊：



（圖6）

在其中的方框中輸入網頁的標題：太平洋電腦網，點擊確定鍵。接著再彈出一個對話方塊要求輸入顏色，如圖7所示：



（圖7）

點擊確定鍵後就產生了如圖8所示的網頁：



（圖8）

點擊 此處去測試頁面

就象我們前面所解釋的，寫東西到一個已經裝載的文檔或者視窗是不可能的。為了顯示這個代碼我們開啟新視窗並為這個視窗寫入產生的HTML代碼。

當然，你可以只使用JavaScript來格式化文本，但是一旦被格式化後的文本出現在網頁上，它就不可變了。

escape() and unescape()

當你從一個網頁向另一個網頁傳遞數值的時候，你可以使用URL搜尋字串（比如使用一個表單，利用method="get"）,這時你會發現有些字元被轉換為 %nn格式：

http://www.mydomain.com.au/index.html?name=Duncan%20Crombie

而網路伺服器和網路瀏覽器只能處理有限的字元，所以任何的字元一旦超過這個範圍都將以數位形式進行傳遞。

這個escape函數可以對變數進行編碼，當設定cookies的時候它經常使用；而unescape函數是用來對它們進行解碼。