前面的話
前面已經介紹過字串String型別的基本知識，本文將介紹String型別的屬性和方法
屬性
字串String型別的每個例項都有一個length屬性，表示字串中的字元個數。由於字串是不可變的，所以字串的長度也不可變
字串的length屬性不會在for/in迴圈中列舉，也不能通過delete操作符刪除
[注意]對於字串s來說，最後一個字元的索引是s.length - 1
var str = "test"; console.log(str.length);//4 str.length = 6; console.log(str,str.length);//"test",4
例項方法
字串String物件有多達20多個例項方法，包括toString()、toLocaleString()、valueOf()從Object物件繼承的3種物件通用方法，chartAt()、中括號[]、charCodeAt()和fromCharCode()4種訪問字元方法，concat()和加號+這2種字串拼接方法，slice()、substr()和substring()3種建立子字串方法，toLowerCase()、toLocaleLowerCase()、toUpperCase()、toLocaleUpperCase()這4種大小寫轉換方法，indexOf()和lastIndexOf()這2種查詢字串位置的方法，match()、search()、replace()、split()這4種正則匹配方法以及去除首尾空格的trim()方法和字串比較的localeCompare()方法
物件通用方法
String型別是與字串對應的包裝型別，繼承了Object物件的通用方法toString()、toLocaleString()、valueOf()這三個方法
【toString()】
toString()方法返回string的原始字串值
【toLocaleString()】
toLocaleString()方法返回string的原始字串值
【valueOf()】
valueOf()方法返回string的原始字串值
console.log("test".valueOf());//"test"
console.log("test".toString());//"test"
console.log("test".toLocaleString());//"test"
訪問字元方法
字串的訪問字元方法總共有chartAt()、中括號[]、charCodeAt()和fromCharCode()四種
【chartAt()】
charAt()方法接收一個基於0的字元位置的引數，返回指定位置的字元。當引數為空或NaN時，預設引數為0；當引數超出範圍時，則返回一個空字串
var str = "hello"; console.log(str.charAt(1));//e console.log(str.charAt(-1));//'' console.log(str.charAt(10));//'' console.log(str.charAt());//h
console.log(str.charAt(NaN));//h
charAt()方法涉及到Number()函式的隱式型別轉換，如果轉換為數值，則按照上述規則輸出字串；如果轉換為NaN，則輸出第0個字元
var str = "hello"; console.log(str.charAt(true));//'e' console.log(str.charAt(false));//'h' console.log(str.charAt('abc'));//'h' console.log(str.charAt({}));//'h' console.log(str.charAt([2]));//'l'
[注意]x.charAt(pos)與x.substring(pos, pos+1)、x.substr(pos,1)、x.slice(pos,pos+1)的結果相等
var str = "hello"; console.log(str.charAt(1));//'e' console.log(str.substring(1,2));//'e' console.log(str.slice(1,2));//'e' console.log(str.substr(1,1));//'e'
【中括號】
ECMAScript5定義了另一個訪問字元的方法，使用方括號加數字索引來訪問字串中的特定字元。如果引數超出範圍或是NaN時，則輸出undefined；沒有引數時，會報錯；該方法沒有Number()轉型函式的隱式型別轉換，但引數為單數值陣列時可轉換為數值
[注意]IE7-瀏覽器不支援
var str = "hello"; console.log(str[0]);//h console.log(str[[1]]);//e console.log(str[false]);//undefined console.log(str[-1]);//undefined console.log(str[NaN]);//undefined console.log(str[]);//報錯
【charCodeAt()】
charCodeAt()方法類似於charAt()方法，接收一個基於0的字元位置的引數，但返回的是指定位置的字元16位Unicode編碼。返回值是一個16位的整數，在0-65535之間，即0x0000-0xffff之間
引數為空或NaN時，預設引數為0；當引數超出範圍時，則返回NaN
var str = "hello"; console.log(str.charCodeAt());//104 console.log(str.charCodeAt(0));//104 console.log(str.charCodeAt(1));//101 console.log(str.charCodeAt(-1));//NaN console.log(str.charCodeAt(10));//NaN console.log(str.charCodeAt(NaN));//104
同樣地，charCodeAt()方法涉及到Number()函式的隱式型別轉換，如果轉換為數值，則按照上述規則輸出相應值；如果轉換為NaN，則輸出第0個字元的字元編碼
var str = "hello"; console.log(str.charCodeAt(true));//101 console.log(str.charCodeAt(false));//104 console.log(str.charCodeAt('abc'));//104 console.log(str.charCodeAt({}));//104 console.log(str.charCodeAt([2]));//l08
【fromCharCode()】
String建構函式本身有一個靜態方法:fromCharCode()。這個方法的任務是接收一個或多個字元編碼，然後把它們轉換成一個字串。從本質上看，這個方法與例項方法charCodeAt()執行的是相反的操作。若引數為空或NaN時，則返回空字串；若引數超出0-65535的範圍，則輸出字元不可控
console.log(String.fromCharCode(104,101,108,108,111));//'hello' console.log(String.fromCharCode(0x6211,0x662f,0x5c0f,0x706b,0x67f4));//'我是小火柴' console.log(String.fromCharCode());//'' console.log(String.fromCharCode(NaN));//'' console.log(String.fromCharCode(-1)); console.log(String.fromCharCode(65560));
如果一個字元佔用四位元組，則需要拆成兩個字元表示
console.log(String.fromCharCode(0xD842, 0xDFB7)); // "?"
字串拼接
關於字串拼接共有concat()和加號+兩種方法
【concat()】
concat()方法用於將一個或多個字串拼接起來，返回拼接得到的新字串，而原字串不發生改變。若引數(第一個引數除外)不是字串，則通過String()方法隱式轉換為字串，再進行字串拼接
var stringValue = 'hello '; var result = stringValue.concat('world','!'); console.log(result);//'hello world!' console.log(stringValue);//'hello'
[注意]第一個引數只能是字串，如果是其他型別(陣列除外)則報錯
(1).concat('2');//報錯
(true).concat('false');//報錯
({}).concat('abc');//報錯
[注意]由於陣列也存在concat()方法，引數會按照首先出現的引數是陣列還是字串來決定如何轉換
'1,2,3,'.concat([4,5]);//'1,2,3,4,5' [1,2,3].concat(',4,5');//[1, 2, 3, ",4,5"]
【加號運算子(+)】
雖然concat()是專門用來拼接字串的方法，但實踐中使用更多的還是加號運算子(+)。使用加號運算子在許多時候都比concat()簡單方便
var stringValue = 'hello '; console.log(stringValue.concat('world','!'));//'hello world!' console.log(stringValue + 'world' + '!');//'hello world!'
[注意]當運算元其中一個是字串，或者物件轉換為字串時，才進行字串拼接
1 + 2;//3 '1' + 2;//'12' var o = {valueOf:function(){return '1';}}; o + 2;//'12' var o = {valueOf:function(){return 1;}}; o + 2;//3
建立子字串
建立子字串共有slice()、substr()和substring()三種方法
【slice()】
slice(start,end)方法需要兩個引數start和end，返回這個字串中從start位置的字元到(但不包含)end位置的字元的一個子字串；如果end為undefined或不存在，則返回從start位置到字串結尾的所有字元
如果start是負數，則start = max(length + start,0)
如果end是負數，則end = max(length + end,0)
start和end無法交換位置
var stringValue = 'hello world'; console.log(stringValue.slice());//'hello world' console.log(stringValue.slice(0, 2));//'he' console.log(stringValue.slice(0, -2));//'hello wor' console.log(stringValue.slice(2));//'llo world' console.log(stringValue.slice(-2));//'ld' console.log(stringValue.slice(2,undefined));//'llo world' console.log(stringValue.slice(2,-5));//'llo ' console.log(stringValue.slice(2,-20));//'' console.log(stringValue.slice(20));//'' console.log(stringValue.slice(-2,2));//'' console.log(stringValue.slice(-2,-20));//'' console.log(stringValue.slice(-2,20));//'ld' console.log(stringValue.slice(-20,2));//'he' console.log(stringValue.slice(-20,-2));//'hello wor'
slice()方法涉及到Number()轉型函式的隱式型別轉換，當start被轉換為NaN時，相當於start = 0；當end被轉換為NaN時(end為undefined除外)，則輸出空字串
var stringValue = 'hello world'; console.log(stringValue.slice(NaN));//'hello world' console.log(stringValue.slice(0,NaN));//'' console.log(stringValue.slice(true,[3]));//'el' console.log(stringValue.slice(null,undefined));//'hello world' console.log(stringValue.slice({}));//'hello world' console.log(stringValue.slice('2',[5]));//'llo'
【substring()】
substring(start,end)方法需要兩個引數start和end，返回這個字串中從start位置的字元到(但不包含)end位置的字元的一個子字串；如果end為undefined或不存在，則返回從start位置到字串結尾的所有字元
如果任一引數是NaN或負數，則被0取代
如果任一引數大於字串長度，則被字串長度取代
如果start 大於 end，則交換它們的值
var stringValue = 'hello world'; console.log(stringValue.substring());//'hello world' console.log(stringValue.substring(2));//'llo world' console.log(stringValue.substring(2,undefined));//'llo world' console.log(stringValue.substring(20));//'' console.log(stringValue.substring(-2,2));//'he' console.log(stringValue.substring(NaN,2));//'he' console.log(stringValue.substring(-2,20));//'hello world' console.log(stringValue.substring(3,2));//'l' console.log(stringValue.substring(3,NaN));//'hel' console.log(stringValue.substring(-20,2));//'he' console.log(stringValue.substring(-20,-2));//''
同樣地，substring()方法也涉及到Number()轉型函式的隱式型別轉換
var stringValue = 'hello world'; console.log(stringValue.substring(true,[3]));//'el' console.log(stringValue.substring(null,undefined));//'hello world' console.log(stringValue.substring({}));//'hello world' console.log(stringValue.substring('2',[5]));//'llo'
【substr()】
substr(start,end)方法需要兩個引數start和end，end代表返回的子字串的字元個數；該方法返回這個字串中從start位置的字元開始的end個字元的一個子字串；如果end為undefined或不存在，則返回從start位置到字串結尾的所有字元
如果start是負數，則start = max(length + start,0)
如果start是NaN，則相當於start = 0
如果end是負數或NaN，則end = 0，因此會返回空字串
start和end無法交換位置
[注意]該方法不是ECMAScript標準，已經被棄用
[注意]IE8-瀏覽器在處理向substr()傳遞負值的情況時存在問題，它會返回原始的字串
var stringValue = 'hello world'; console.log(stringValue.substr());//'hello world' console.log(stringValue.substr(2));//'llo world' console.log(stringValue.substr(2,undefined));//'llo world' console.log(stringValue.substr(2,NaN));//'' console.log(stringValue.substr(NaN,2));//'he' console.log(stringValue.substr(20));//'' console.log(stringValue.substr(-2,3));//'ld' console.log(stringValue.substr(-2,20));//'ld' console.log(stringValue.substr(-20,2));//'he' console.log(stringValue.substr(-20,-2));//'' console.log(stringValue.substr(2,5));//llo w
同樣地，substr()方法也涉及到Number()轉型函式的隱式型別轉換
var stringValue = 'hello world'; console.log(stringValue.substr(true,[3]));//'el' console.log(stringValue.substr(null,undefined));//'hello world' console.log(stringValue.substr({}));//'hello world' console.log(stringValue.substr('2',[5]));//'llo w'
[注意]對於以上三個建立子串的方法來說，如果是空字串，則無論引數是什麼，仍然返回空字串
var str = ''; console.log(str.slice(1));//'' console.log(str.substring(1));//'' console.log(str.substr(1));//''
大小寫轉換
ECMAScript中涉及字串大小寫轉換的方法有4個：toLowerCase()、toLocaleLowerCase()、toUpperCase()、toLocaleUpperCase()
toLowerCase()和toUpperCase()是兩個經典的方法，借鑑自java.lang.String中的同名方法。而toLocaleLowerCase()和toLocaleUpperCase()方法則是針對特定地區的實現，對有些地區來說，針對地區的方法與其通用方法得到的結果相同，但少數語言(如土耳其語)會為Unicode大小寫轉換應用特殊的規則，這時候就必須使用針對地區的方法來保證實現正確的轉換
【toUpperCase()】
toUpperCase()方法將字串轉換成大寫
【toLowerCase()】
toLowerCase()方法將字串轉換成小寫
【toLocaleUpperCase()】
toLocaleUpperCase()方法將字串轉換成大寫(針對地區)
【toLocaleLowerCase()】
toLocaleLowerCase()方法將字串轉換成小寫(針對地區)
[注意]在不知道自己的程式碼將在哪個語言環境中執行的情況下，使用針對地區的方法更穩妥
var string = 'Hello World'; console.log(string.toLowerCase());//hello world console.log(string.toLocaleLowerCase());//hello world console.log(string.toUpperCase());//HELLO WORLD console.log(string.toLocaleUpperCase());//HELLO WORLD
這4種方法均不支援String()隱式型別轉換，只支援字串型別
(true).toLowerCase();//報錯 (2).toLocaleLowerCase();//報錯 ({}).toUpperCase();//報錯 ([]).toLocaleUpperCase();//報錯
[注意]大小寫轉換方法可以連續使用
var string = 'Hello World'; console.log((string.toUpperCase()).toLowerCase());//hello world
將帶有分割符的字串轉換為駝峰的形式
var txt = "border-top-left"; var arr = txt.split('-'); for(var i = 1; i < arr.length; i++){ arr[i] = arr[i].charAt(0).toUpperCase() + arr[i].slice(1); } var result = arr.join(''); console.log(result);//'borderTopLeft"
查詢子串位置
有兩個從字串中查詢子字串位置的方法：indexOf()和lastIndexOf()。查詢子串位置的方法同訪問字元方法charAt()和中括號[]方法有相反的地方，一個通過字串查詢位置，一個則是通過位置查詢字元
【indexOf()】
indexOf(searchString,start)方法接收searchString和start兩個引數，返回searchString首次出現的位置，如果沒有找到則返回-1
該方法會隱式呼叫String()轉型函式，將searchString非字串值轉換為字串；隱式呼叫Number()轉型函式，將start非數字值(undefined除外)轉換為數值
searchString表示要搜尋的子字串；start表示該搜尋的開始位置，若忽略該引數或該引數為undefined、NaN或負數時，start = 0
var string = 'hello world world'; console.log(string.indexOf('ld'));//9 console.log(string.indexOf('ld',undefined));//9 console.log(string.indexOf('ld',NaN));//9 console.log(string.indexOf('ld',-1));//9 console.log(string.indexOf('ld',10));//15 console.log(string.indexOf('ld',[10]));//15 console.log(string.indexOf('true',[10]));//-1 console.log(string.indexOf(false,[10]));//-1
【lastIndexOf()】
與indexOf()不同，lastIndexOf()從右向左查詢
lastIndexOf(searchString,start)方法接收searchString和start兩個引數，返回searchString第一次出現的位置，如果沒有找到則返回-1
同樣地，該方法會隱式呼叫String()轉型函式，將searchString非字串值轉換為字串；隱式呼叫Number()轉型函式，將start非數字值(undefined除外)轉換為數值
searchString表示要搜尋的子字串；start表示該搜尋的開始位置，若忽略該引數或該引數為undefined、NaN時，start = length - 1；若start為負數，start = 0
var string = 'hello world world'; console.log(string.lastIndexOf('ld'));//15 console.log(string.lastIndexOf('ld',undefined));//15 console.log(string.lastIndexOf('ld',NaN));//15 console.log(string.lastIndexOf('ld',-1));//-1 console.log(string.lastIndexOf('h',-1));//0 console.log(string.lastIndexOf('w',undefined));//12 console.log(string.lastIndexOf('ld',10));//9 console.log(string.lastIndexOf('ld',[10]));//9 console.log(string.lastIndexOf('true',[10]));//-1 console.log(string.lastIndexOf(false,[10]));//-1
【tips】查詢出字串所有符合條件的子字串
可以通過迴圈呼叫indexOf()或lastIndexOf()來找到所有匹配的子字串
function allIndexOf(str,value){ var result = []; var pos = str.indexOf(value); while(pos > -1){ result.push(pos); pos = str.indexOf(value,pos+value.length); } return result; } console.log(allIndexOf('helllhelllhelll','ll'));//[2,7,12]
lastIndexOf()方法常用於獲取URL地址中的副檔名
var url = "http://cnblogs.com/xiaohuochai.txt"; function getFileFormat(url){ var pos = url.lastIndexOf('.'); return url.slice(pos+1); } console.log(getFileFormat(url));//'txt'
正則匹配方法
javascript中的一些正則操作如查詢和測試等可以通過RegExp的方法實現，而切分和替換等另一些操作可以通過String類的方法實現
String類共有match()、search()、replace()、split()這4種正則匹配方法
【match()】
match()方法只接受一個為正則或字串的引數，並以陣列的形式返回匹配的內容。這個方法類似於正規表示式RegExp的exec()方法，只是調換了RegExp和String物件的位置
若匹配失敗，則match()方法返回null
'x'.match(/y/);//null
【1】若不設定全域性標誌，match()方法和exec()方法結果相同
var string = 'cat,bat,sat,fat'; var pattern = /.at/; var matches = string.match(pattern); console.log(matches,matches.index,matches.input);//['cat'] 0 'cat,bat,sat,fat' var matches = string.match(pattern); console.log(matches,matches.index,matches.input);//['cat'] 0 'cat,bat,sat,fat' var string = 'cat,bat,sat,fat'; var pattern = /.at/; var exec = pattern.exec(string); console.log(exec,exec.index,exec.input);//['cat'] 0 'cat,bat,sat,fat' var exec = pattern.exec(string); console.log(exec,exec.index,exec.input);//['cat'] 0 'cat,bat,sat,fat'
【2】設定全域性標誌後，exec()方法依然返回單次的匹配結果，而match()方法會返回一個字串陣列，其中包括各次成功匹配的文字，但沒有index和input屬性
var string = 'cat,bat,sat,fat'; var pattern = /.at/g; var matches = string.match(pattern); console.log(matches,matches.index,matches.input);//["cat", "bat", "sat", "fat"] undefined undefined var matches = string.match(pattern); console.log(matches,matches.index,matches.input);//["cat", "bat", "sat", "fat"] undefined undefined var string = 'cat,bat,sat,fat'; var pattern = /.at/g; var exec = pattern.exec(string); console.log(exec,exec.index,exec.input);//['cat'] 0 'cat,bat,sat,fat' var exec = pattern.exec(string); console.log(exec,exec.index,exec.input);//['bat'] 4 'cat,bat,sat,fat'
【3】match()方法作為字串String的方法，接受引數為字串，結果與不設定全域性標誌的正規表示式為引數相同，只返回第一個匹配項，且具有index和input屬性
var string = 'cat,bat,sat,fat'; var matches = string.match('at'); console.log(matches,matches.index,matches.input);//['at'] 1 'cat,bat,sat,fat' var matches = string.match('at'); console.log(matches,matches.index,matches.input);//['at'] 1 'cat,bat,sat,fat'
當不設定全域性標誌時，match()方法和exec()方法都包含捕獲分組的資訊；設定全域性標誌後，match()方法不包含捕獲分組的資訊
var string = 'cat,bat,sat,fat'; var pattern = /(.)at/g; var matches = string.match(pattern); console.log(matches);//['cat', 'bat', 'sat', 'fat'] var exec = pattern.exec(string); console.log(exec);//['cat','c'] var string = 'cat,bat,sat,fat'; var pattern = /(.)at/; var matches = string.match(pattern); console.log(matches);//['cat','c'] var exec = pattern.exec(string); console.log(exec);//['cat','c']
【tips】兩種方法找出字串中所有的數字
【1】用charAt()方法
var str1 = 'j1h342jg24g234j 3g24j1'; var array = []; var temp = ''; for(var i = 0; i < str1.length; i++){ var value = parseInt(str1.charAt(i));//如果用Number()將無法排除空格 if(!isNaN(value)){ temp += str1.charAt(i); }else{ if(temp != ''){ array.push(temp); temp = ''; } } } if(temp != ''){ array.push(temp); temp = ''; } console.log(array);//["1", "342", "24", "234", "3", "24", "1"]
【2】用match()方法
var str1 = 'j1h342jg24g234j 3g24j1'; array = str1.match(/\d+/g); console.log(array);//["1", "342", "24", "234", "3", "24", "1"]
【search()】
search()方法接受一個正則或字串的引數，返回匹配的內容在字串中首次出現的位置，類似於不能設定起始位置的indexOf，找不到返回-1
[注意]search()方法不執行全域性匹配，忽略全域性標誌g，也會忽略RegExp物件的lastIndex屬性，總是從字串的開始位置開始搜尋
'x'.search(/y/);//-1
var string = 'cat,bat,sat,fat'; var pattern = /.at/; var pos = string.search(pattern); console.log(pos);//0 var string = 'cat,bat,sat,fat'; var pattern = /.at/g; var pos = string.search(pattern); console.log(pos);//0 var string = 'cat,bat,sat,fat'; var pattern = 'at'; var pos = string.search(pattern); console.log(pos);//1
【tips】找出匹配的所有位置
function fnAllSearch(str,pattern){ var pos = str.search(pattern); var length = str.match(pattern)[0].length; var index = pos+length; var result = []; var last = index; result.push(pos); while(true){ str = str.substr(index); pos = str.search(pattern); if(pos === -1){ break; } length = str.match(pattern)[0].length; index = pos+length; result.push(last+pos); last += index; } return result; } console.log(fnAllSearch('cat23fbat246565sa3dftf44at',/\d+/));//[3,9,17,22]
【replace()】
replace()方法用於替換一個或多個子字串。它接收兩個引數：第一個是正規表示式或字串，表示待查詢的內容；第二個是字串或函式，表示替換內容。返回替換後的字串
【1】字串替換，只能替換第一個子字串
var string = 'cat,bat,sat,fat'; var result = string.replace('at','ond'); console.log(result);//'cond,bat,sat,fat'
【2】不設定全域性標誌g，也只能替換第一個子字串
var string = 'cat,bat,sat,fat'; var result = string.replace(/at/,'ond'); console.log(result);//'cond,bat,sat,fat'
【3】設定全域性標誌g，替換所有匹配的子字串
var string = 'cat,bat,sat,fat'; var result = string.replace(/at/g,'ond'); console.log(result);//'cond,bond,sond,fond'
與match()和seartch()方法相比，replace()方法更為強大，它可以在第二個引數中通過短屬性名來使用某些正規表示式的靜態屬性
短屬性名 說明 $& 最近一次的匹配項 $` 匹配項之前的文字 $' 匹配項之後的文字 $1,$2... 表示第N個匹配捕獲組
var string = 'cat-bat-sat-fat'; console.log(string.replace(/(.)(at)/g,'$&'));//'cat-bat-sat-fat' console.log(string.replace(/(.)(at)/g,'$`'));//'-cat--cat-bat--cat-bat-sat-' console.log(string.replace(/(.)(at)/g,"$'"));//'-bat-sat-fat--sat-fat--fat-' console.log(string.replace(/(.)(at)/g,'$1'));//'c-b-s-f' console.log(string.replace(/(.)(at)/g,'$2'));//'at-at-at-at'
var string = '2016-06-24'; console.log(string.replace(/(\d{4})-(\d{2})-(\d{2})/g,'$2/$3/$1'));//'06/24/2016'
replace()方法的第二個引數可以是函式，這樣文字的處理更加靈活
如果在只有一個匹配項的情況下，該方法會向這個函式傳遞3個引數：模式的匹配項、模式匹配項在字串中的位置、原始字串
var string = 'cat,bat,sat,fat'; var index = 0; var matchArray = []; var posArray = []; var text = ''; var result = string.replace(/at/g,function(match,pos,originalText){ matchArray.push(match); posArray.push(pos); text = originalText; index++; if(index % 2){ return 'wow'; }else{ return '0'; } }); console.log(matchArray);//["at", "at", "at", "at"] console.log(posArray);//[1, 5, 9, 13] console.log(text);//'cat,bat,sat,fat' console.log(result);//'cwow,b0,swow,f0'
如果正規表示式定義多個捕獲組，則該方法傳遞給函式的引數依次是模式的匹配項、第一個捕獲組的匹配項、第二個捕獲組的匹配項……第N個捕獲組的匹配項，但最後兩個引數仍然分別是模式的匹配項在字串中的位置和原始字串，這個函式返回一個字串
var string = 'cat,bat,sat,fat'; var index = 0; var matchArray = []; var m1Array = []; var posArray = []; var text = ''; var result = string.replace(/(.)at/g,function(match,m1,pos,originalText){ matchArray.push(match); m1Array.push(m1); posArray.push(pos); text = originalText; return m1 + 'ta'; }); console.log(matchArray);//["cat", "bat", "sat", "fat"] console.log(m1Array);//['c','b','s','f'] console.log(posArray);//[1, 5, 9, 13] console.log(text);//'cat,bat,sat,fat' console.log(result);//'cta,bta,sta,fta'
【tips】首字母大寫
var text = 'one two three'; var result = text.replace(/\b(\w+)\b/g,function(match,m1,pos,originalText){ return m1.charAt(0).toUpperCase()+m1.substring(1); }) console.log(result);
【tips】HTML標籤轉義
function htmlEscape(text){ return text.replace(/[<>"&]/g,function(match,pos,originalText){ switch(match){ case '<': return '<'; case '>': return '>'; case '&': return '&'; case '\"': return '"'; } }); } console.log(htmlEscape('<p class=\"greeting\">Hello world!</p>')); //<p class=" greeting">Hello world!</p> console.log(htmlEscape('<p class="greeting">Hello world!</p>')); //同上
【tips】日期格式化
var array = ['2015.7.28','2015-7-28','2015/7/28','2015.7-28','2015-7.28','2015/7---28']; function formatDate(date){ return date.replace(/(\d+)\D+(\d+)\D+(\d+)/,'$1年$2月$3日') } var result = []; for(var i = 0 ; i < array.length; i++){ result.push(formatDate(array[i])); } console.log(result);//["2015年7月28日", "2015年7月28日", "2015年7月28日", "2015年7月28日", "2015年7月28日", "2015年7月28日"]
【tips】找出重複項最多的字元和個數
var str = 'aaaaabbbbbdddddaaaaaaaffffffffffffffffffgggggcccccce'; var pattern = /(\w)\1+/g; var maxLength = 0; var maxValue = ''; var result = str.replace(pattern,function(match,match1,pos,originalText){ if(match.length > maxLength){ maxLength = match.length; maxValue = match1; } }) console.log(maxLength,maxValue);//18 "f"
【split()】
split()方法基於指定的分隔符將一個字串分割成多個字串，並將結果放在一個陣列中，分隔符可以是字串，也可以是一個RegExp
該方法可以接受第二個引數(可選)用於指定陣列的大小，如果第二個引數為0-array.length範圍內的值時按照指定引數輸出，其他情況將所有結果都輸出
若指定分隔符沒有出現在字串中，則以陣列的形式返回原字串的值
[注意]引數中的正規表示式是否使用全域性標誌g對結果沒有影響
var colorText = 'red,blue,green,yellow'; console.log(colorText.split(''));//["r", "e", "d", ",", "b", "l", "u", "e", ",", "g", "r", "e", "e", "n", ",", "y", "e", "l", "l", "o", "w"] console.log(colorText.split(','));//["red", "blue", "green", "yellow"] console.log(colorText.split(',',2));//["red", "blue"] console.log(colorText.split(',',6));//["red", "blue", "green", "yellow"] console.log(colorText.split('-'));//["red,blue,green,yellow"] console.log(colorText.split(/\,/));//["red", "blue", "green", "yellow"] console.log(colorText.split(/e/));//["r", "d,blu", ",gr", "", "n,y", "llow"] console.log(colorText.split(/[^\,]+/));//將除去逗號以外的字串變為分隔符["", ",", ",", ",", ""],IE8-會識別為[",",",",","]
去除首尾空格
【trim()】
ECMAScript5為所有字串定義了trim()方法。這個方法會建立一個字串的副本，刪除前置及字尾的所有空白字元，然後返回結果
由於trim()方法返回的是字串的副本，所以原始字串中的前置及字尾空格會保持不變
[注意]IE8-瀏覽器不支援
var string = ' hello world '; console.log(string.trim());//'hello world' console.log(string);//' hello world '
空白字元不僅僅包括空格，還包括製表符(\t)、換行符(\n)和回車符(\r)
'\r\nabc \t'.trim() // 'abc'
此外，firefox、safari和webkit還支援非標準的trimRight()用於刪除字串結尾的空白字元
var string = ' hello world '; console.log(string.trimRight());//' hello world';
【tips】用trim()來判斷輸入的字元是否為空
if(usename.trim().length){ alert('correct'); }else{ alert('error'); }
【tips】用正規表示式模擬trim()
function fnTrim(str){ return str.replace(/^\s+|\s+$/,'') } console.log(fnTrim(' hello world '));//'hello world'
字串比較
【localeCompare()】
localeCompare()方法用於比較兩個字串，遵循下列規則
【1】如果字串在字母表中應該排在字串引數之前，則返回一個負數(大多數情況下為-1)
【2】如果字串等於字串引數，則返回0
【3】如果字串在字母表中應該排在字串引數之後，則返回一個正數(大多數情況下為1)
var stringValue = 'yellow'; console.log(stringValue.localeCompare('brick'));//1 'y'> 'b' console.log(stringValue.localeCompare('yellow'));//0 'yellow' == 'yellow' console.log(stringValue.localeCompare('zoo'));//-1 'yellow' < 'zoo'
[注意]雖然在字母表中大寫字母在小寫字母的前面，所以大寫字母 < 小寫字母。但localeCompare()方法會考慮自然語言的排序情況，把'B'排在'a'的後面
console.log('B'.localeCompare('a'));//1
console.log('B' > 'a');//false
console.log('b'.localeCompare('a'));//1
console.log('b' > 'a');//true
【tips】按照中文拼音首字母排序
['張三','李四','王五'].sort((a, b) => a.localeCompare(b, 'zh-Hans-CN'}))
參考資料
【1】 ES5/標準內建物件 https://www.w3.org/html/ig/zh/wiki/ES5/builtins#String_.E5.AF.B9.E8.B1.A1
【2】 阮一峰Javascript標準參考教程——標準庫String物件 http://javascript.ruanyifeng.com/stdlib/string.html
【3】《javascript高階程式設計(第3版)》第5章 引用型別
【4】《javascript語言精粹(修訂版)》 第8章 方法
【5】《正則指引》第12章 Javascript
【6】《javascript啟示錄》 第10章 String()