021_字符串方法
1. indexOf()方法
1.1. indexOf()方法可返回某個指定的字符串值在字符串中首次出現的位置。
1.2. 語法
stringObject.indexOf(searchValue, fromIndex)1.3. 參數
1.4. 該方法將從頭到尾地檢索字符串stringObject, 看它是否含有子串searchValue。開始檢索的位置在字符串的fromIndex處或字符串的開頭(沒有指定fromIndex時)。如果找到一個searchValue, 則返回 searchValue的第一次出現的位置。
1.5. indexOf()方法對大小寫敏感。
1.6. 如果要檢索的字符串值沒有出現, 則該方法返回-1。
2. lastIndexOf()方法
2.1. lastIndexOf()方法可返回一個指定的字符串值最后出現的位置, 在一個字符串中的指定位置從后向前搜索。
2.2. 語法
stringObject.lastIndexOf(searchValue, fromIndex)2.3. 參數
2.4. 該方法將從尾到頭地檢索字符串stringObject, 看它是否含有子串searchValue。開始檢索的位置在字符串的fromIndex處或字符串的結尾(沒有指定fromindex時)。如果找到一個searchvalue, 則返回 searchValue的第一個字符在stringObject中的位置。
2.5. indexOf()方法對大小寫敏感。
2.6. 如果要檢索的字符串值沒有出現, 則該方法返回-1。
2.7. lastIndexOf()方法加上第二個參數的檢索是非常不好理解的。比如我們想在下面這個字符串中從后向前檢索'China'這個字符串, 它最后一次出現的位置是51, 然后就會拿這個51和我們指定的fromIndex比大小, 如果fromIndex大于等于51, 說明我們要查找的'China'字符串, 在我們指定的位置之前, 是合法的返回51這個位置; 如果fromIndex小于51, 說明我們要查找的這個'China'字符串, 還在我們指定的位置之后, 是非法的, 需要繼續向前檢索。
2.8. 例子
2.8.1. 代碼
<!DOCTYPE html> <html><head><meta charset="utf-8" /><title>查找字符串中的字符串</title></head><body><img src="character.png" alt="字符圖片" /><script type="text/javascript">var str = "The full name of China is the People's Republic of China.";document.write('China第一次出現的位置: ' + str.indexOf("China") + '<br />');document.write('China最后一次出現的位置: ' + str.lastIndexOf("China") + '<br />');document.write('從下標是18的位置開始算, China第一次出現的位置: ' + str.indexOf("China", 18) + '<br />');document.write('從下標是16的位置開始算, China最后一次出現的位置: ' + str.lastIndexOf("China", 16) + '<br />');document.write('從下標是17的位置開始算, China最后一次出現的位置: ' + str.lastIndexOf("China", 17) + '<br />');document.write('從下標是18的位置開始算, China最后一次出現的位置: ' + str.lastIndexOf("China", 18) + '<br />');document.write('從下標是50的位置開始算, China最后一次出現的位置: ' + str.lastIndexOf("China", 50) + '<br />');document.write('從下標是51的位置開始算, China最后一次出現的位置: ' + str.lastIndexOf("China", 51) + '<br />');document.write('從下標是52的位置開始算, China最后一次出現的位置: ' + str.lastIndexOf("China", 52) + '<br />');document.write('xxx第一次出現的位置: ' + str.indexOf("xxx") + '<br />');</script></body> </html>2.8.2. 效果圖
3. search()方法
3.1. search()方法用于檢索字符串中指定的字符串, 或檢索與正則表達式相匹配的字符串。
3.2. 語法
stringObject.search(regexp)3.3. 參數
3.4. 返回值是stringObject中第一個與regexp相匹配的子串的起始位置。
3.5. 如果沒有找到任何匹配的子串, 則返回-1。
3.6. search()方法不執行全局匹配, 它將忽略標志g。它總是從字符串的開始進行檢索, 這意味著它總是返回stringObject的第一個匹配的位置。
3.7. 例子
3.7.1. 代碼
<!DOCTYPE html> <html><head><meta charset="utf-8" /><title>檢索字符串中的字符串</title></head><body><script type="text/javascript">var str = "The full name of China is the People's Republic of China";document.write('<b>我們檢索的字符串是: ' + str + '</b><br />');document.write('China字符串第一次出現的位置: ' + str.search(/China/) + '<br />');document.write('search()方法不執行全局匹配, 它將忽略標志g, 加上了g標志, 返回的仍是China字符串第一次出現的位置: ' + str.search(/China/g) + '<br />');document.write('忽略大小寫, china字符串第一次出現的位置: ' + str.search(/china/i) + '<br />');document.write('匹配字符串結尾是否有China字符串, 并返回它的位置: ' + str.search(/China$/) + '<br />');</script></body> </html>3.7.2. 效果圖
4. slice()方法
4.1. slice()方法用于提取字符串中介于兩個指定下標之間的字符, 并以新的字符串返回被提取的部分。
4.2. 語法
stringObject.slice(start, end)4.3. 參數
4.4. 該方法設置兩個參數: 起始索引(開始位置), 終止索引(結束位置)。截取的字符串包含開始位置, 不包含結束位置。
4.5. 如果某個參數為負, 則從字符串的結尾開始計數。我們可以用字符串的長度加上負數參數, 來完成對負數參數截取字符串位置的判斷。
4.6. 如果省略第二個參數, 則該方法將裁剪字符串的剩余部分。
4.7. slice()方法的起始位置不能比結束位置大(如果是負數, 比較的是字符串長度加上負數后的結果參數)。
4.8. 如果參數start與stop相等, 那么該方法返回的就是一個空串(即長度為0的字符串)。一般不這么做, 沒意義。
4.9. 例子
4.9.1. 代碼
<!DOCTYPE html> <html><head><meta charset="utf-8" /><title>提取部分字符串-slice</title></head><body><script type="text/javascript">var str = "People's Republic of China.";document.write('<b>原始字符串是: ' + str + ' 字符串長度: ' + str.length + '</b><br />');document.write('str.slice(21)返回字符串: ' + str.slice(21) + '<br />');document.write('str.slice(21, 26)返回字符串: ' + str.slice(21, 26) + '<br />');// 字符串長度是27, 27-6=21。所以位置是21, 27。document.write('str.slice(-6)返回字符串: ' + str.slice(-6) + '<br />');// 字符串長度是27, 27-6=21, 27-1=26。所以位置是21, 26。document.write('str.slice(-6, -1)返回字符串: ' + str.slice(-6, -1) + '<br />');// 字符串長度是27, 27-1=26。所以位置是21, 26。document.write('str.slice(21, -1)返回字符串: ' + str.slice(21, -1) + '<br />');document.write('str.slice(21, 21)起始和結束位置相等, 返回空字符串: ' + str.slice(21, 21) + '<br />');</script></body> </html>4.9.2. 效果圖
5. substring()方法
5.1. substring()方法用于提取字符串中介于兩個指定下標之間的字符, 并以新的字符串返回被提取的部分。
5.2. 語法
stringObject.substring(start, stop)5.3. 參數
5.4. 該方法設置兩個參數: 起始索引(開始位置), 終止索引(結束位置)。截取的字符串包含開始位置, 不包含結束位置, 其長度為stop減start。
5.5. 如果省略第二個參數, 則該方法將裁剪字符串的剩余部分。
5.6. substring()方法不同于slice()的地方是, 無法接受負的索引。
5.7. 如果你傳入一個負數索引, 它認為這個索引是0。
5.8. 如果起始位置比結束位置大, 它認為小的參數是起始位置, 大的參數是結束位置。
5.9. 如果參數start與stop相等, 那么該方法返回的就是一個空串(即長度為0的字符串)。一般不這么做, 沒意義。
5.10. 例子
5.10.1. 代碼
<!DOCTYPE html> <html><head><meta charset="utf-8" /><title>提取部分字符串-substring</title></head><body><script type="text/javascript">var str = "People's Republic of China.";document.write('<b>原始字符串是: ' + str + ' 字符串長度: ' + str.length + '</b><br />');document.write('str.substring(21)返回字符串: ' + str.substring(21) + '<br />');document.write('str.substring(21, 26)返回字符串: ' + str.substring(21, 26) + '<br />');document.write('str.substring(26, 21)==str.substring(21, 26)返回字符串: ' + str.substring(26, 21) + '<br />');document.write('str.substring(-6)==str.substring(0)返回字符串: ' + str.substring(-6) + '<br />');document.write('str.substring(21, -1)==str.substring(0, 21)返回字符串: ' + str.substring(21, -1) + '<br />');document.write('str.substring(21, 21)起始和結束位置相等, 返回空字符串: ' + str.substring(21, 21) + '<br />');</script></body> </html>5.10.2. 效果圖
6. substr()方法
6.1. substr()方法可在字符串中抽取從start下標開始的指定數目的字符,?并以新的字符串返回被提取的部分。
6.2. 語法
stringObject.substr(start, length)6.3. 參數
6.4. 該方法設置兩個參數: 起始索引(開始位置), 被提取部分的長度。
6.5. 如果省略第二個參數, 則該方法將裁剪字符串的剩余部分。
6.6. ECMAscript沒有對該方法進行標準化, 因此反對使用它。
6.7. length必須大于等于0, 如果指定為0, 截取0個字符, 返回空字符串; 如果指定為負數和0效果一樣。
6.8. 如果開始位置參數為負, 則從字符串的結尾開始計數。我們可以用字符串的長度加上負數參數, 來完成對負數參數截取字符串位置的判斷。
6.9. 例子
6.9.1. 代碼
<!DOCTYPE html> <html><head><meta charset="utf-8" /><title>提取部分字符串-substr</title></head><body><script type="text/javascript">var str = "People's Republic of China.";document.write('<b>原始字符串是: ' + str + ' 字符串長度: ' + str.length + '</b><br />');document.write('str.substr(21)返回字符串: ' + str.substr(21) + '<br />');document.write('str.substr(21, 5)返回字符串: ' + str.substr(21, 5) + '<br />');document.write('str.substr(21, 0)返回字符串: ' + str.substr(21, 0) + '<br />');document.write('str.substr(21, -5)返回字符串: ' + str.substr(21, -5) + '<br />');// 字符串長度是27, 27-6=21。返回位置是21之后的所有字符。document.write('str.substr(-6)返回字符串: ' + str.substr(-6) + '<br />');</script></body> </html>6.9.2. 效果圖
7. replace()方法
7.1. replace()方法用于在字符串中用一些字符替換另一些字符, 或替換一個與正則表達式匹配的子串。
7.2. 語法
stringObject.replace(regexp/substr, replacement)7.3. 參數
7.4. replace()方法不會改變調用它的字符串。它返回的是新字符串。
7.5. 默認地, replace()只替換首個匹配。如需替換所有匹配, 請使用正則表達式的g標志(用于全局搜索)。
7.6. 默認地, replace()對大小寫敏感。如需執行大小寫不敏感的替換, 請使用正則表達式的i標志(大小寫不敏感)。
7.7. 參數replacement中的$字符具有特定的含義。如下表所示, 它說明從模式匹配得到的字符串將用于替換。
7.8. 參數replacement可以是函數, 在這種情況下, 每個匹配都調用該函數, 它返回的字符串將作為替換文本使用。該函數的第一個參數是匹配模式的字符串。接下來的參數是與模式中的子表達式匹配的字符串, 可以有0個或多個這樣的參數。接下來的參數是一個整數, 聲明了匹配在stringObject中出現的位置。最后一個參數是stringObject本身。
7.9. 例子
7.9.1. 代碼
<!DOCTYPE html> <html><head><meta charset="utf-8" /><title>替換字符串內容-replace</title></head><body><script type="text/javascript">var str = "HeNan software treasure technology company is in henan.";document.write('<b>原始字符串是: ' + str + '</b><br />');document.write('str.replace("HeNan", "ZhengZhou")返回字符串: ' + str.replace("HeNan", "ZhengZhou") + '<br />');document.write('str.replace(/henan/i, "ZhengZhou")返回字符串: ' + str.replace(/henan/i, "ZhengZhou") + '<br />');document.write('str.replace(/HeNan/ig, "zhengzhou")返回字符串: ' + str.replace(/HeNan/ig, "zhengzhou") + '<br /><br />');document.write('函數參數的使用: ' + str.replace(/(\w+)\s*(\.)/g, function(str, substr1, substr2, index, mySelf){document.write('第一個參數是匹配模式的字符串: ' + str + '<br />');document.write('第二個參數是與模式中的子表達式匹配的字符串: ' + substr1 + '<br />');document.write('第三個參數是與模式中的子表達式匹配的字符串: ' + substr2 + '<br />');document.write('倒數第二個參數是一個整數, 聲明了匹配在stringObject中出現的位置: ' + index + '<br />');document.write('最后一個參數是stringObject本身: ' + mySelf + '<br />');return 'zhengzhou.';}) + '<br /><br />');document.write('$1、$2、...、$99的使用: ' + str.replace(/(\w+)\s*(\w+)\s*(\w+)\s*(\w+)\s*(\w+)\s*(\w+)\s*(\w+)\s*(\w+)(\.)/, '$9$8 $7 $6 $5 $4 $3 $2 $1') + '<br />');document.write('$&的使用: ' + str.replace(/\s+(\w+)\s+/, "($&)") + '<br />');document.write('$`的使用: ' + str.replace(/\s+(\w+)\s+/, "($`)") + '<br />');document.write("$'的使用: " + str.replace(/\s+(\w+)\s+/, "($')") + '<br />');document.write("$$'的使用: " + str.replace(/\s+(\w+)\s+/, "($$')") + '<br />');</script></body> </html>7.9.2. 效果圖
8. toLowerCase()方法
8.1. toLowerCase()方法用于把字符串轉換為小寫。
8.2. 語法
stringObject.toLowerCase()8.3. 返回一個新的字符串, 在其中stringObject的所有大寫字符全部被轉換為了小寫字符。原字符串不變。
9. toUpperCase()方法
9.1. toUpperCase()方法用于把字符串轉換為大寫。
9.2. 語法
stringObject.toUpperCase()9.3. 返回一個新的字符串, 在其中stringObject的所有小寫字符全部被轉換為了大寫字符。原字符串不變。
9.4. 例子
9.4.1. 代碼
<!DOCTYPE html> <html><head><meta charset="utf-8" /><title>轉換為大寫和小寫</title></head><body><script type="text/javascript">var str = "Hello World!";var res1 = str.toUpperCase();var res2 = str.toLowerCase();window.alert('str = ' + str + '\r\nres1 = ' + res1 + '\r\nres2 = ' + res2);</script></body> </html>9.4.2. 效果圖
10. concat()方法
10.1. concat()方法用于連接兩個或多個字符串。
10.2. 語法
stringObject.concat(stringX, stringX, ..., stringX)10.3. 參數
10.4. concat()方法將把它的所有參數轉換成字符串, 然后按順序連接到字符串stringObject的尾部, 并返回連接后的字符串。請注意, stringObject本身并沒有被更改。
10.5. 使用"+"運算符來進行字符串的連接運算通常會更簡便一些。
10.6. 例子
10.6.1. 代碼
<!DOCTYPE html> <html><head><meta charset="utf-8" /><title>連接字符串</title></head><body><script type="text/javascript">var str = "Hello";var text = "World";var res1 = str.concat(" ", text);var res2 = str + ' ' + text;window.alert(res1 + '\r\n' + res2);</script></body> </html>10.6.2. 效果圖
11. 刪除字符串兩端的空白符
11.1. trim()方法刪除字符串兩端的空白符。
11.2. 例子
11.2.1. 代碼
<!DOCTYPE html> <html><head><meta charset="utf-8" /><title>刪除字符串兩端的空白符</title></head><body><script type="text/javascript">var str = " Hello World! "window.alert(str.trim());</script></body> </html>11.2.2. 效果圖
12. charAt()方法
12.1. charAt()方法可返回指定位置的字符。這個方法只認識Unicode編碼在0-65535之間的字符。
12.2. 語法
stringObject.charAt(index)12.3. 參數
12.4. 如果參數index不在0與string.length之間, 該方法將返回一個空字符串。
13. charCodeAt()方法
13.1. charCodeAt()方法可返回指定位置的字符的Unicode編碼。這個返回值是0-65535之間的整數。
13.2. 語法
stringObject.charCodeAt(index)13.3. 參數
13.4. 如果index是負數, 或大于等于字符串的長度, 則charCodeAt()返回NaN。
13.5. 例子
13.5.1. 代碼
<!DOCTYPE html> <html><head><meta charset="utf-8" /><title>提取字符串字符</title></head><body>0 = 48<br />a = 97<br />中 = 20013<br /> = 65535<br />𠀁 = 131073<br /><br /><script type="text/javascript">var str = "0a中𠀁";document.write('<b>原始字符串: ' + str + '</b><br />');document.write('str.charAt(0) = ' + str.charAt(0) + ', 對應的Unicode值: ' + str.charCodeAt(0) + '<br />');document.write('str.charAt(1) = ' + str.charAt(1) + ', 對應的Unicode值: ' + str.charCodeAt(1) + '<br />');document.write('str.charAt(2) = ' + str.charAt(2) + ', 對應的Unicode值: ' + str.charCodeAt(2) + '<br />');document.write('str.charAt(3) = ' + str.charAt(3) + ', 對應的Unicode值: ' + str.charCodeAt(3) + '<br /><br />');document.write('charAt()和charCodeAt()方法只認識0-65535的部分, 最后一個字符它不認識:' + '<br />');document.write('<del>str.charAt(4) = ' + str.charAt(4) + ', 對應的Unicode值: ' + str.charCodeAt(4) + '</del><br /><br />');document.write('index不在0與string.length之間, charAt(9)方法將返回一個空字符串 = ' + str.charAt(9) + '<br />');document.write('如果index是負數, 或大于等于字符串的長度, 則charCodeAt(9)返回NaN: ' + str.charCodeAt(9) + '<br />');</script></body> </html>13.5.2. 效果圖
14. split()方法
14.1. split()方法用于把一個字符串分割成字符串數組。
14.2. 語法
stringObject.split(separator, howmany)14.3. 參數
14.4. 返回一個字符串數組。該數組是通過在separator指定的邊界處將字符串stringObject分割成子串創建的。返回的數組中的字串不包括separator自身。
14.5. 如果separator是包含子表達式的正則表達式, 那么返回的數組中包括與這些子表達式匹配的字串(但不包括與整個正則表達式匹配的文本)。
14.6. 如果分隔符是"", 被返回的數組將是間隔單個字符的數組。
14.4. 例子
14.4.1. 代碼
<!DOCTYPE html> <html><head><meta charset="utf-8" /><title>把字符串轉換為數組</title></head><body><script type="text/javascript">var txt = "zhangsan|lisi|wangwu|zhaoliu"; var res1 = txt.split("|");var res2 = txt.split("");var res3 = txt.split("", 3);var res4 = txt.split(/(lisi)(\|)/);window.alert(res1 + '\r\n' + res2 + '\r\n' + res3 + '\r\n' + res4);</script></body> </html>14.4.2. 效果圖
15. 屬性訪問字符串
15.1. JavaScript允許對字符串使用以[]+下標的方式進行屬性訪問。
15.2. 它讓字符串看起來像是數組(其實并不是)。
15.3. 如果找不到字符, 返回undefined。
15.4. 它是只讀的。
15.5. 例子
15.5.1. 代碼
<!DOCTYPE html> <html><head><meta charset="utf-8" /><title>屬性訪問字符串</title></head><body><script type="text/javascript">var str = "HELLO WORLD";window.alert(str[0] + "\r\n" + str[-1]);</script></body> </html>15.5.2. 效果圖
16. match()方法
16.1. match()方法可在字符串內檢索指定的值或找到一個或多個正則表達式的匹配。
16.2. 語法
stringObject.match(searchvalue) stringObject.match(regexp)16.3. 參數
16.4. 返回值存放匹配結果的數組。match()方法將檢索字符串stringObject, 以找到一個或多個與regexp匹配的文本。這個方法的行為在很大程度上有賴于regexp是否具有標志g。
16.5.?如果regexp沒有標志g, 那么match()方法就只能在stringObject中執行一次匹配。如果沒有找到任何匹配的文本, match()將返回null。否則, 它將返回一個數組, 其中存放了與它找到的匹配文本有關的信息。該數組的第0個元素存放的是匹配文本, 而其余的元素存放的是與正則表達式的子表達式匹配的文本。除了這些常規的數組元素之外, 返回的數組還含有兩個對象屬性。index屬性聲明的是匹配文本的起始字符在stringObject中的位置, input屬性聲明的是對stringObject的引用。
16.6.?如果regexp具有標志g, 則match()方法將執行全局檢索, 找到stringObject中的所有匹配字符串。若沒有找到任何匹配的子串, 則返回null。如果找到了一個或多個匹配子串, 則返回一個數組。不過全局匹配返回的數組的內容與前者大不相同, 它的數組元素中存放的是stringObject中所有的匹配子串, 而且也沒有index屬性或input屬性。
16.7.?在全局檢索模式下, match()即不提供與子表達式匹配的文本的信息, 也不聲明每個匹配子串的位置。如果您需要這些全局檢索的信息, 可以使用RegExp.exec()。
16.8.?例子
16.8.1. 代碼
?
<!DOCTYPE html> <html><head><meta charset="utf-8" /><title>match()方法</title></head><body><script type="text/javascript">var str = "The full name of China is the People's Republic of China。";document.write('<b>我們檢索的字符串是: ' + str + '</b><hr />');var r1 = str.match('China');document.write('<b>匹配字符串是: China</b><br />');document.write('匹配結果: ' + r1 + '<br />匹配位置: ' + r1.index + '<br />匹配(查找)的字符串: ' + r1.input + '<hr />');var r2 = str.match(/china/i);document.write('<b>匹配模式是: /china/i</b><br />');document.write('匹配結果: ' + r2 + '<br />匹配位置: ' + r2.index + '<br />匹配(查找)的字符串: ' + r2.input + '<hr />');var r3 = str.match(/china(。)/i);document.write('<b>匹配模式是: /china(。)/i</b><br />');document.write('匹配結果: ' + r3 + '<br />匹配位置: ' + r3.index + '<br />匹配(查找)的字符串: ' + r3.input + '<hr />');var r4 = str.match(/china/ig);document.write('<b>匹配模式是: /china/ig</b><br />');document.write('匹配結果: ' + r4 + '<br />匹配位置: ' + r4.index + '<br />匹配(查找)的字符串: ' + r4.input + '<hr />');var r5 = str.match(/(of\s)china/ig);document.write('<b>匹配模式是: /(of\\s)china/ig</b><br />');document.write('匹配結果: ' + r5 + '<br />匹配位置: ' + r5.index + '<br />匹配(查找)的字符串: ' + r5.input);</script></body> </html>16.8.2. 效果圖
總結
- 上一篇: 020_字符串
- 下一篇: 022_JavaScript数字