JavaScript 的字串資料型態可以用來表示一列文字內容。我們只要把文字括在相符的單括號或雙括號裡,就可以形成一個字串。雙括號可以包含在括在單括號的字串裡,而單括號也可以包含在括在雙括號的字串裡。下列是字串的範例:
"This is a string"
'This is a string quoted by single quotes'
"This is a string with 'single' quotes"
'This is a string with "double" quotes'
"This another string with \"double\" quotes"
請注意在上述範例中的最後一個字串包含了雙引號,為了避掉雙引號的原來用途(標示字串的開始和結束),我們要在雙引號前加上反斜線(\)。
JavaScript 的字串物件具備了許多方法,這些方法可對字串本身進行各種修改或計算,所造成的效果可列出如下:
Example(string01.htm ):
上述範例的完整原始檔案如下:
原始檔(string01.htm ): (灰色區域按兩下即可拷貝) <html>
<head>
<meta HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=big5">
</head>
<body>
<h2 align=center>字串物件的方法與性質</h2>
<hr>
<script>
myStr = "Tang Poem: 多情卻似總無情,唯覺樽前笑不成。";
document.write("原字串:myStr = " + myStr + "<br>");
document.write("字串長度:myStr.length = " + myStr.length + "<br>");
document.write("增大字型:myStr.big() = " + myStr.big() + "<br>");
document.write("減小字型:myStr.small() = " + myStr.small() + "<br>");
document.write("閃爍字串:myStr.blink() = " + myStr.blink() + "<br>");
document.write("變黑體:myStr.bold() = " + myStr.bold() + "<br>");
document.write("變斜體:myStr.italics() = " + myStr.italics() + "<br>");
document.write("變等寬字體:myStr.fixed() = " + myStr.fixed() + "<br>");
document.write("槓掉字串:myStr.strike() = " + myStr.strike() + "<br>");
document.write("變下標:myStr.sub() = " + myStr.sub() + "<br>");
document.write("變上標:myStr.sup() = " + myStr.sup() + "<br>");
document.write("設定顏色:myStr.fontcolor(\"salmon\") = " + myStr.fontcolor("salmon") + "<br>");
document.write("設定字型大小:myStr.fontsize(5) = " + myStr.fontsize(5) + "<br>");
document.write("換成大寫字母:myStr.toUpperCase() = " + myStr.toUpperCase() + "<br>");
document.write("換成小寫字母:myStr.toLowerCase() = " + myStr.toLowerCase() + "<br>");
document.write("字串並排:myStr.concat(\"新加的\") = " + myStr.concat("新加的") + "<br>");
document.write("抽出字元:myStr.charAt(13) = " + myStr.charAt(13) + "<br>");
document.write("抽出 Unicode 字元:myStr.charCodeAt(13) = " + myStr.charCodeAt(13) + "<br>");
document.write("抽出子字串:myStr.substr(13, 5) = " + myStr.substr(13, 5) + "<br>");
document.write("抽出子字串:myStr.substring(13, 15) = " + myStr.substring(13, 15) + "<br>");
document.write("尋找子字串:myStr.indexOf(\"情\") = " + myStr.indexOf("情") + "<br>");
document.write("尋找子字串:myStr.lastIndexOf(\"情\") = " + myStr.lastIndexOf("情") + "<br>");
</script>
<hr>
</body>
</html>
要注意的是,在執行物件的方法時,輸入引數可有可無,但括號一定要有,此要求和 JavaScript 的函數是一致的。字串物件常用的方法可以列表說明如下:
物件 性質或方法 說明 等效的HTML標籤
String length 傳回字串的長度
big() 增大字串的字型 <big>...</big>
small() 減小字串的字型 <small>...</small>
blink() 閃爍字串(此方法只適用於 Netscape 瀏覽器,不適用於 IE 瀏覽器) <blink>...</blink>
bold() 變黑體 <b>...</b>
italics() 變斜體 <i>...</i>
fixed() 變等寬字體 <tt>...</tt>
strike() 槓掉字串 <strike>...</strike>
sub() 變下標 <sub>...</sub>
sup() 變上標 <sup>...</sup>
fontcolor() 設定字串的顏色 <font color=...>...</font>
fontsize() 設定字串的字型大小 <font size=...>...</font>
toUpperCase() 換成大寫字母
toLowerCase() 換成小寫字母
concat() 字串並排(等效於使用加號)
charAt(n) 抽出第 n 個字元(n=0 代表第一個字元)
charCodeAt(n) 抽出第 n 個字元(n=0 代表第一個字元),並轉換成 Unicode
substr(m, n) 傳回一個字串,從位置 m 開始,且長度為 n
substring(m, n) 傳回一個字串,從位置 m 開始,結束於位置 n-1
indexOf(str) 尋找子字串 str 在原字串的第一次出現位置
lastIndexOf(str) 尋找子字串 str 在原字串的最後一次出現位置
Hint 請特別注意 substr(m, n) 和 substring(m, n) 在功能上的差異。如果 text = "我願是千萬條江河",則
text.substr(3,5)會傳回 "千萬條江河"(第3個字元開始,取5個字元) text.substring(3,5)會傳回 "千萬"(第3個字元開始,第4個字元結束)
在上表中,有關於字串的比對,只提到了 indexOf() 和 lastIndexOf() 兩個方法,事實上 JavaScript 對於字串的比對和代換有許多強大的功能,例如 search、match、replace 等函數,這些功能統稱「通用表示法」,將會在其後章節仔細介紹。
有時候我們也可以將字串看成是 JavaScript 中的指令來執行之,這時候所用到的相關指令是 eval(),此指令特別適用於「使用迴圈創造變數」,請見下列範例:
Example(eval01.htm ):
上述範例的完整原始檔案如下:
原始檔(eval01.htm ): (灰色區域按兩下即可拷貝) <html>
<head>
<meta HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=big5">
</head>
<body>
<h2 align=center>如何使用 eval()</h2>
<hr>
<script>
for (i=1; i<=3; i++){
command = "x" + i + "=" + i*i*i;
eval(command);
}
document.write("x1 = " + x1 + "<br>");
document.write("x2 = " + x2 + "<br>");
document.write("x3 = " + x3 + "<br>");
</script>
<hr>
</body>
</html>
在上述範例中,我們把 JavaScript 要執行的命令收集在字串變數 command,然後再用 eval 指令來 "執行" 這個字串,就可以創造出三個變數 x1、x2 和 x3。
JavaScript 還有一些內建或使用者自創的物件,對於這些物件,我們可以使用 toString() 來轉換成字串表示,例如:
Example(toString01.htm ):
上述範例的完整原始檔案如下:
原始檔(toString01.htm ): (灰色區域按兩下即可拷貝) <html>
<head>
<meta HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=big5">
</head>
<body>
<h2 align=center>如何使用 toString()</h2>
<hr>
<script>
x = "This is a string";
document.write("字串:" + x.toString()+"<br>");
x = new Date();
document.write("日期:" + x.toString()+"<br>");
x = ["Mon", "Tue", "Wed"];
document.write("陣列:" + x.toString()+"<br>");
function square(n){
return(n*n);
}
document.write("函數:" + square.toString()+"<br>");
student = new Object();
student.name = "Timmy";
student.age = "25";
student.phone = "575-1114";
document.write("自訂物件:" + student.toString()+"<br>");
</script>
<hr>
</body>
</html>
由上例可以看出,toString() 的行為視物件型態而定,可列表說明如下:
物件 toString() 的結果
Array(陣列) 將 Array 的元素轉換為字串,形成以逗號串連起來的結果,此結果 與 Array.toString() 和 Array.join() 得到的結果相同
Boolean(布林) 如果布林值為 True,會傳回 "true";否則會傳回 "false"
Date(日期) 傳回顯示日期的文字形式
Error(錯誤) 傳回包含錯誤訊息的字串
Function(函數) 傳回函數的定義
Number(數字) 傳回數字的文字表示法
String(字串) 傳回 String 物件的值
自訂物件 傳回 "[object Object]"
此外,若要將字串轉成數值,可用 parseInt() 或是 parseFloat() 這兩個函數,說明如下:
parseInt() 可將字串轉整數。(若轉換不成功,則傳回 NaN。)
parseFloat() 可將字串轉浮點數。(若轉換不成功,則傳回 NaN。)
相關範例可見前一小節的說明。
JavaScript 程式設計與應用:用於網頁用戶端