3-3 r

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標籤
Stringlength傳回字串的長度
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() 這兩個函數,說明如下:

相關範例可見前一小節的說明。
JavaScript 程式設計與應用:用於網頁用戶端