首頁 > 開發者 > JavaScript
HTML DOM教程 50-JavaScript String 對象
字串是 JavaScript 的一種基本的資料類型。
String 對象的 length 屬性聲明了該字串中的字元數。String 類定義了大量操作字串的方法。
需要注意的是，JavaScript 的字串是不可變的，String 類定義的方法都不能改變字串的內容。
1:String 對象的方法| 方法 | 描述 | FF | N | IE |
|---|---|---|---|---|
| anchor() | 建立 HTML 錨。 | 1 | 2 | 3 |
| big() | 用大號字型顯示字串。 | 1 | 2 | 3 |
| blink() | 顯示閃動字串。 | 1 | 2 | |
| bold() | 使用粗體顯示字串。 | 1 | 2 | 3 |
| charAt() | 返回在指定位置的字元。 | 1 | 2 | 3 |
| charCodeAt() | 返回在指定的位置的字元的 Unicode 編碼。 | 1 | 4 | 4 |
| concat() | 連接字串。 | 1 | 4 | 4 |
| fixed() | 以打字機文本顯示字串。 | 1 | 2 | 3 |
| fontcolor() | 使用指定的顏色來顯示字串。 | 1 | 2 | 3 |
| fontsize() | 使用指定的尺寸來顯示字串。 | 1 | 2 | 3 |
| fromCharCode() | 從字元編碼建立一個字串。 | 1 | 4 | 4 |
| indexOf() | 檢索字串。 | 1 | 2 | 3 |
| italics() | 使用斜體顯示字串。 | 1 | 2 | 3 |
| lastIndexOf() | 從後向前搜尋字串。 | 1 | 2 | 3 |
| link() | 將字串顯示為連結。 | 1 | 2 | 3 |
| localeCompare() | 用本地特定的順序來比較兩個字串。 | 1 | 4 | 4 |
| match() | 找到一個或多個正在運算式的匹配。 | 1 | 4 | 4 |
| replace() | 替換與Regex匹配的子串。 | 1 | 4 | 4 |
| search() | 檢索與Regex相匹配的值。 | 1 | 4 | 4 |
| slice() | 提取字串的片斷，並在新的字串中返回被提取的部分。 | 1 | 4 | 4 |
| small() | 使用小字型大小來顯示字串。 | 1 | 2 | 3 |
| split() | 把字串分割為字串數組。 | 1 | 4 | 4 |
| strike() | 使用刪除線來顯示字串。 | 1 | 2 | 3 |
| sub() | 把字串顯示為下標。 | 1 | 2 | 3 |
| substr() | 從起始索引號提取字串中指定數目的字元。 | 1 | 4 | 4 |
| substring() | 提取字串中兩個指定的索引號之間的字元。 | 1 | 2 | 3 |
| sup() | 把字串顯示為上標。 | 1 | 2 | 3 |
| toLocaleLowerCase() | 把字串轉換為小寫。 | - | - | - |
| toLocaleUpperCase() | 把字串轉換為大寫。 | - | - | - |
| toLowerCase() | 把字串轉換為小寫。 | 1 | 2 | 3 |
| toUpperCase() | 把字串轉換為大寫。 | 1 | 2 | 3 |
| toSource() | 代表對象的原始碼。 | 1 | 4 | - |
| toString() | 返回字串。 | - | - | - |
| valueOf() | 返回某個字串對象的原始值。 | 1 | 2 | 4 |
| 屬性 | 描述 | FF | N | IE |
|---|---|---|---|---|
| constructor | 對建立該對象的函數的引用 | 1 | 4 | 4 |
| length | 字串的長度 | 1 | 2 | 3 |
| prototype | 允許您向對象添加屬性和方法 | 1 | 2 | 4 |
3:anchor() 方法
在本例中，我們會為文本添加一個錨：
<script type="text/javascript">
var txt="Hello world!"
document.write(txt.anchor("myanchor"))
</script>上面的代碼將輸出為純粹的 HTML：
<a name="myanchor">Hello world!</a>4:blink(),big(),sub(),fixed()等方法
<html>
<body><script type="text/javascript">
var txt="Hello World!"
document.write("<p>Big: " + txt.big() + "</p>")
document.write("<p>Small: " + txt.small() + "</p>")document.write("<p>Bold: " + txt.bold() + "</p>")
document.write("<p>Italic: " + txt.italics() + "</p>")document.write("<p>Blink: " + txt.blink() + " (does not work in IE)</p>")
document.write("<p>Fixed: " + txt.fixed() + "</p>")
document.write("<p>Strike: " + txt.strike() + "</p>")document.write("<p>Fontcolor: " + txt.fontcolor("Red") + "</p>")
document.write("<p>Fontsize: " + txt.fontsize(16) + "</p>")document.write("<p>Lowercase: " + txt.toLowerCase() + "</p>")
document.write("<p>Uppercase: " + txt.toUpperCase() + "</p>")document.write("<p>Subscript: " + txt.sub() + "</p>")
document.write("<p>Superscript: " + txt.sup() + "</p>")document.write("<p>Link: " + txt.link("http://www.w3school.com.cn") + "</p>")
</script></body>
</html>5：concat() 方法
在本例中，我們將建立兩個字串，然後使用 concat() 把它們顯示為一個字串：
<script type="text/javascript">
var str1="Hello "
var str2="world!"
document.write(str1.concat(str2))
</script>以上代碼的輸出是：
Hello world!6：indexOf() 方法
注釋1：indexOf() 方法對大小寫敏感！
注釋2：如果要檢索的字串值沒有出現，則該方法返回 -1。
在本例中，我們將在 "Hello world!" 字串內進行不同的檢索：
<script type="text/javascript">
var str="Hello world!"
document.write(str.indexOf("Hello") + "<br />")
document.write(str.indexOf("World") + "<br />")
document.write(str.indexOf("world"))
</script>以上代碼的輸出：
0
-1
67：substring() 方法
文法：stringObject.substring(start,stop)：如果省略stop參數，那麼返回的子串會一直到字串的結尾；如果參數 start 與 end 相等，那麼該方法返回的就是一個空串（即長度為 0 的字串）。如果 start 比 end 大，那麼該方法在提取子串之前會先交換這兩個參數。
重要事項：與 slice() 和 substr() 方法不同的是，substring() 不接受負的參數。
在本例中，我們將使用 substring() 從字串中提取一些字元：
<script type="text/javascript">
var str="Hello world!"
document.write(str.substring(3))
</script>輸出：
lo world!8：split() 方法
文法：stringObject.split(separator,howmany)：參數howmany可指定返回的數組的最大長度。如果設定了該參數，返回的子串不會多於這個參數指定的數組。如果沒有設定該參數，整個字串都會被分割，不考慮它的長度。
注釋：如果把Null 字元串 ("") 用作 separator，那麼 stringObject 中的每個字元之間都會被分割。
例子 1在本例中，我們將按照不同的方式來分割字串：
<script type="text/javascript">
var str="How are you doing today?"
document.write(str.split(" ") + "<br />")
document.write(str.split("") + "<br />")
document.write(str.split(" ",3))
</script>輸出：
How,are,you,doing,today?例子 2
H,o,w, ,a,r,e, ,y,o,u, ,d,o,i,n,g, ,t,o,d,a,y,?
How,are,you在本例中，我們將分割結構更為複雜的字串：
"2:3:4:5".split(":")//將返回["2", "3", "4", "5"]例子 3
"|a|b|c".split("|")//將返回["", "a", "b", "c"]使用下面的代碼，可以把句子分割成單詞：
var words = sentence.split(' ')或者使用Regex作為 separator：
var words = sentence.split(/"s+/)例子 4如果您希望把單詞分割為字母，或者把字串分割為字元，可使用下面的代碼：
"hello".split("")//可返回 ["h", "e", "l", "l", "o"]若只需要返回一部分字元，請使用 howmany 參數：
"hello".split("", 3)//可返回 ["h", "e", "l"]9：match() 方法
match() 方法可在字串內檢索指定的值，或找到一個或多個Regex的匹配。該方法類似 indexOf() 和 lastIndexOf()，但是它返回指定的值，而不是字串的位置。
文法：stringObject.match(searchvalue)，其中 searchvalue必需。規定要檢索的字串值。
或者stringObject.match(regexp)，其中regexp必需。規定要匹配的模式的 RegExp 對象。如果該參數不是 RegExp 對象，則需要首先把它傳遞給 RegExp 建構函式，將其轉換為 RegExp 對象。
match() 方法將檢索字串 stringObject，以找到一個或多個與 regexp 匹配的文本。這個方法的行為在很大程度上有賴於 regexp 是否具有標誌 g。
如果 regexp 沒有標誌 g，那麼 match() 方法就只能在 stringObject 中執行一次匹配。如果沒有找到任何匹配的文本， match() 將返回 null。否則，它將返回一個數組，其中存放了與它找到的匹配文本有關的資訊。該數組的第 0 個元素存放的是匹配文本，而其餘的元素存放的是與Regex的子運算式匹配的文本。除了這些常規的數組元素之外，返回的數組還含有兩個對象屬性。index 屬性聲明的是匹配文本的起始字元在 stringObject 中的位置，input 屬性聲明的是對 stringObject 的引用。
如果 regexp 具有標誌 g，則 match() 方法將執行全域檢索，找到 stringObject 中的所有匹配子字串。若沒有找到任何匹配的子串，則返回 null。如果找到了一個或多個匹配子串，則返回一個數組。不過全域匹配返回的數組的內容與前者大不相同，它的數組元素中存放的是 stringObject 中所有的匹配子串，而且也沒有 index 屬性或 input 屬性。
注意：在全域檢索模式下，match() 即不提供與子運算式匹配的文本的資訊，也不聲明每個匹配子串的位置。如果您需要這些全域檢索的資訊，可以使用 RegExp.exec()。
例子 1
在本例中，我們將在 "Hello world!" 中進行不同的檢索：
<script type="text/javascript">
var str="Hello world!"
document.write(str.match("world") + "<br />")
document.write(str.match("World") + "<br />")
document.write(str.match("worlld") + "<br />")
document.write(str.match("world!"))
</script>輸出：
world例子 2
null
null
world!在本例中，我們將使用全域匹配的Regex來檢索字串中的所有數字：
<script type="text/javascript">
var str="1 plus 2 equal 3"
document.write(str.match(/"d+/g))
</script>輸出：
1,2,3
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
