一、普通方法
1.字符方法
動態方法:1、str.charAt(index); 返回子字符串,index為字符串下標,index取值范圍[0,str.length-1]
動態方法:2、str.charCodeAt(index); 返回子字符串的unicode編碼,index取值范圍同上
靜態方法:3、String.fromCharCode(num1,num2,...,numN); 根據unicode編碼返回字符串
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <title>字符方法</title> </head> <body> <script type="text/javascript"> /* charAt方法和charCodeAt方法都接收一個參數,基於0的字符位置 charAt方法是以單字符字符串的形式返回給定位置的那個字符 charCodeAt方法獲取到的不是字符而是字符編碼 */ var str="hello world"; console.log(str.charAt(1));//e console.log(str.charCodeAt(1));//101 //還可以使用方括號加數字索引來訪問字符串中特定的字符 console.log(str[1]);//e </script> </body> </html>
2.字符串操作方法
concat方法
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <title>concat方法</title> </head> <body> <script type="text/javascript"> var str="hello "; var res=str.concat("world"); console.log(res);//hello world console.log(str);//hello 這說明原來字符串的值沒有改變 var res1=str.concat("nihao","!"); console.log(res1);//hello nihao! 說明concat方法可以接收任意多個參數 //雖然concat方法是專門用來拼接字符串的,但是實踐中我們使用最多的還是加操作符+,因為其簡易便行 </script> </body> </html>
3.截取字符串
slice方法、substring方法、substr方法:
- str.substring(start,end); 兩個參數都為正數,返回值:[start,end) 也就是說返回從start到end-1的字符
- str.slice(start,end); 兩個參數可正可負,負值代表從右截取,返回值:[start,end) 也就是說返回從start到end-1的字符
不建議用:str.substr(start,length); start參數可正可負,負數代表從右截取
除了 slice() 和 substr() 方法里的負值是代表從右截取,其他方法里的負值一律作為0處理
【引申】:截取數組
arr.slice(start,end); 兩個參數可正可負,負值代表從右截取,返回值:[start,end) 也就是說返回從start到end-1的字符
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <title>字符串操作方法</title> </head> <body> <script type="text/javascript"> /* slice方法:第一個參數指定子字符串開始位置,第二個參數表示子字符串最后一個字符后面的位置 substring方法:第一個參數指定子字符串開始位置,第二個參數表示子字符串最后一個字符后面的位置 substr方法:第一個參數指定子字符串開始位置,第二個參數表示返回的字符個數 這三個方法都會返回被操作字符串的一個子字符串,都接收一或兩個參數 如果沒有給這些方法傳遞第二個參數,則將字符串的長度作為結束位置。這些方法也不會修改字符串本身,只是返回一個基本類型的字符串值 */ var str="hello world"; console.log(str.slice(3));//lo world console.log(str.substring(3));//lo world console.log(str.substr(3));//lo world console.log(str.slice(3,7));//lo w 7表示子字符串最后一個字符后面的位置 簡單理解就是包含頭不包含尾 console.log(str.substring(3,7));//lo w console.log(str.substr(3,7));//lo worl 7表示返回7個字符 console.log(str.slice(3,-4));//lo w -4+11=7表示子字符串最后一個字符后面的位置 簡單理解就是包含頭不包含尾 console.log(str.substring(3,-4));//hel 會轉換為console.log(str.substring(3,0)); //此外由於這個方法會將較小數作為開始位置,較大數作為結束位置,所以相當於調用console.log(str.substring(0,3)); console.log(str.substr(3,-4));//""空字符串 console.log(str.substring(3,0)); </script> </body> </html>
4.字符串位置方法
- str.indexOf(searchString,startIndex); 返回子字符串第一次出現的位置,從startIndex開始查找,找不到時返回-1
- str.lastIndexOf(searchString,startIndex); 從由往左找子字符串,找不到時返回-1
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <title>字符串位置方法</title> </head> <body> <script type="text/javascript"> /* indexOf方法和lastIndexOf方法都是從一個字符串中搜索給定的子字符串,然后返回子字符串的位置,如果沒有找到,則返回-1 indexOf方法是從字符串的開頭向后搜索子字符串,lastIndexOf方法正好相反 這兩個方法都可以接收兩個參數:要查找的子字符串和查找的位置 */ var str="hello world"; console.log(str.indexOf("o"));//4 console.log(str.lastIndexOf("o"));//7 console.log(str.indexOf("o",6));//7 console.log(str.lastIndexOf("o",6));//4 </script> </body> </html>
由於以上兩個方法只能返回1次,當需要將一段字符串里的所有searchString出現的位置都查找出來時,這樣做:
var str = "........"; var s = "妙味"; var i = 0; for( ; str.indexOf(s,i) != -1 ; ) { console.log(str.indexOf(s,i)); i = str.indexOf(s,i) + s.length; }
5.trim方法
str.trim()
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <title>trim方法</title> </head> <body> <script type="text/javascript"> /* trim方法用來刪除字符串前后的空格 */ var str=" hello world "; console.log('('+str.trim()+')');//(hello world) console.log('('+str+')');//( hello world ) </script> </body> </html>
6.字符串大小寫轉換方法
str.toLowerCase()
str.toUpperCase()
7.字符串分割成數組
str.split(separator,limit); 參數1指定字符串或正則,參照2指定數組的最大長度
例:str.split(""); 每個字符都被分割 ['','','','']
str.split(); 整個字符串放到數組里 ['']
【引申】:數組變成字符串
arr.join(分隔符) 以,連接
arr.join('') 無縫連接
arr.join('-') 以-連接
arr.join('<span>' + str + '</span>') 以表達式連接
<script type="text/javascript"> /* split方法是基於指定的字符,將字符串分割成字符串數組 當指定的字符為空字符串時,將會分隔整個字符串 */ var str="red,blue,green,yellow"; console.log(str.split(","));//["red", "blue", "green", "yellow"] console.log(str.split(",",2));//["red", "blue"] 第二個參數用來限制數組大小 console.log(str.split(/[^\,]+/));// ["", ",", ",", ",", ""] //第一項和最后一項為空字符串是因為正則表達式指定的分隔符出現在了子字符串的開頭,即"red"和"yellow" //[^...] 不在方括號內的任意字符 只要不是逗號都是分隔符 </script>
8.localeCompare方法
<script type="text/javascript"> /* 這個方法用於比較兩個字符串 1.如果字符串在字母表中應該排在字符串參數之前,則返回一個負數 1.如果字符串等於字符串參數,則返回0 1.如果字符串在字母表中應該排在字符串參數之后,則返回一個正數 */ var str="yellow"; console.log(str.localeCompare("brick"));//1 console.log(str.localeCompare("yellow"));//0 console.log(str.localeCompare("zoo"));//-1 </script>
9.fromCharCode方法
<script type="text/javascript"> /* fromCharCode方法是接收一或多個字符編碼,然后將其轉換為字符串 fromCharCode方法是String構造函數的一個靜態方法 */ console.log(String.fromCharCode(104,101,108,108,111));//hello </script>
10.字符串之間的比較
字符串之間的比較:比較第一個字符的unicode編碼值,第一個字符要是相同,就比較第二個,依次往下
'10000' < '2' 1的unicode值比2的unicode值小 true
'10000' > 2 轉成數字比較 true
二、高級方法
1.字符串正則匹配
str.match(rgExp) 正則匹配
str.search(/at/)
<script type="text/javascript"> /* match方法:只接受一個參數,由字符串或RegExp對象指定的一個正則表達式 search方法:只接受一個參數,由字符串或RegExp對象指定的一個正則表達式 search方法返回字符串中第一個匹配項的索引,如果沒有匹配項,返回-1 */ var str="cat,bat,sat,fat"; var pattern=/.at/; var matches=str.match(pattern); console.log(matches.index);//0 console.log(matches[0]);//cat console.log(pattern.lastIndex);//0 //lastIndex表示開始搜索下一個匹配項的字符位置,從0算起 var pos=str.search(/at/); console.log(pos);//1 1表示at字符串在原來字符串中第一次出現的位置 </script>
2.replace替換方法
str.replace(rgExp/substr,replaceText) 返回替換后的字符串
<script type="text/javascript"> var str="cat,bat,sat,fat"; var res=str.replace("at","one");//第一個參數是字符串,所以只會替換第一個子字符串 console.log(res);//cone,bat,sat,fat var res1=str.replace(/at/g,"one");//第一個參數是正則表達式,所以會替換所有的子字符串 console.log(res1);//cone,bone,sone,fone </script>
三、方法總結
1.找到匹配字符串所在的各個位置
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <title>字符串匹配</title> </head> <body> <script type="text/javascript"> /*找到匹配字符串所在的各個位置*/ var str="asadajhjkadaaasdasdasdasd"; var position=[]; var pos=str.indexOf("d"); while(pos>-1){ position.push(pos); pos=str.indexOf("d",pos+1); } console.log(position);//[3, 10, 15, 18, 21, 24] </script> </body> </html>
2.字符串去重
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <title>字符串去重</title> </head> <body> <script type="text/javascript"> //String.split() 執行的操作與 Array.join 執行的操作是相反的 //split() 方法用於把一個字符串分割成字符串數組。 //join方法用於將字符串數組連接成一個字符串 //如果把空字符串 ("") 用作 separator,那么 stringObject 中的每個字符之間都會被分割。 var str="aahhgggsssjjj";//這里字符串沒有可以分隔的字符,所以需要使用空字符串作為分隔符 function unique(msg){ var res=[]; var arr=msg.split(""); //console.log(arr); for(var i=0;i<arr.length;i++){ if(res.indexOf(arr[i])==-1){ res.push(arr[i]); } } return res.join(""); } console.log(unique(str));//ahgsj </script> </body> </html>
3.判斷字符串中字符出現的次數
<script type="text/javascript"> /* 1.先實現字符串去重 2.然后對去重后的數組用for循環操作,分別與原始數組中各個值進行比較,如果相等則count++,循環結束將count保存在sum數組中,然后將count重置為0 3.這樣一來去重后的數組中的元素在原數組中出現的次數與sum數組中的元素是一一對應的 */ var str="aacccbbeeeddd"; var sum=[]; var res=[]; var count=0; var arr=str.split(""); for(var i=0;i<arr.length;i++){ if(res.indexOf(arr[i])==-1){ res.push(arr[i]); } } for(var i=0;i<res.length;i++){ for(var j=0;j<arr.length;j++){ if(arr[j]==res[i]){ count++; } } sum.push(count); count=0; } console.log(res);//["a", "c", "b", "e", "d"] for(var i=0;i<res.length;i++){ var str=(sum[i]%2==0)?"偶數":"奇數"; console.log(res[i]+"出現了"+sum[i]+"次"); console.log(res[i]+"出現了"+str+"次"); } </script>
4.阿里面試-字符串操作
<script type="text/javascript"> var str = "www.taobao.com"; var res = str.split("").reverse().join("").replace('oat',''); console.log(res);//moc.oab.www </script>
參考:https://www.cnblogs.com/YYvam1288/p/6973252.html
http://www.jb51.net/article/97915.htm
w3c字符串對象:http://www.w3school.com.cn/jsref/jsref_obj_string.asp