String型別的屬性和方法

小火柴的藍色理想發表於2016-06-24

前面的話

　　前面已經介紹過字串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 '&lt;';
            case '>':
            return '&gt;';
            case '&':
            return '&amp;';
            case '\"':
            return '&quot;';
        }
    });
}
console.log(htmlEscape('<p class=\"greeting\">Hello world!</p>'));
//&lt;p class=&quot; greeting&quot;&gt;Hello world!&lt;/p&gt;
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()

Array String物件的方法和屬性
2017-07-31
物件
Winform 用string型別的屬性來繫結CheckBox薦
2013-08-20
ORM型別
產品集型別和屬性表
2007-12-02
型別
獲取物件屬性型別、屬性名稱、屬性值的研究：反射和JEXL解析引擎
2017-05-16
物件型別反射
js 物件方法、類方法、原型方法的區別;私有屬性、公有屬性、公有靜態屬性的區別
2016-04-01
JS物件原型
第190天：js—String常用屬性和方法（最全）
2018-03-11
JS
定義物料型別的屬性
2007-07-25
型別
JavaScript的String和Boolean型別
2018-10-29
JavaScriptBoolean型別
js中為什麼值型別可以使用方法和屬性
2017-03-20
JS型別
作用域、連結屬性和儲存型別
2021-02-13
型別
python屬性和方法的區別是什麼
2021-09-11
Python
js中為什麼基本型別資料可以使用屬性和方法
2017-03-21
JS型別
vue計算屬性和vue實力的屬性和方法
2018-10-26
Vue
String.valueOf和強制型別轉換(String)的區別
2024-04-24
型別
字串的常用屬性和方法
2018-05-06
字串
Elasticsearch資料型別及其屬性
2018-12-30
Elasticsearch資料型別
a標籤的使用，以及一些全域性屬性和連結型別。
2019-04-27
型別
這樣理解，java繼承中多型的屬性和方法
2021-07-26
Java繼承多型
型別轉換（int 和 String）
2018-07-31
型別
JavaScript公有屬性、私有屬性、公有方法和原型方法
2017-04-15
JavaScript原型
JavaScript封裝方法，相容引數型別為Number和String
2017-02-20
JavaScript封裝型別
javascript基礎（物件，物件屬性，屬性基本和引用資料型別，字面量建立物件，垃圾回收，屬性的列舉）（十三）
2017-02-08
JavaScript物件資料型別
C# 隨機給一個全部資訊都未知的類型別，如何獲取該類的類名、屬性個數、屬性名、屬性的資料型別、屬性值？
2022-05-07
C#隨機資料型別
Function方法和屬性圖
2018-01-19
Function
[轉載] python複數型別-Python 複數屬性和方法操作例項
2020-12-30
Python型別
數值常用的屬性和方法
2020-06-03
vue例項的屬性和方法
2018-10-30
Vue
類的靜態屬性和方法
2020-09-03
物件導向--內部屬性型別
2018-03-30
物件型別
Hibernate 對映xml中的屬性型別
2016-03-23
XML型別
AutoMapper在MVC中的運用04-string對映各種型別、一個屬性對映多個屬性等
2014-02-26
APPMVC型別
php中呼叫類的屬性和函式的方法->_=>_::_$this->區別
2017-11-08
PHP函式
Map和String型別之間的轉換
2020-10-03
型別
日期型別與String型別的轉換
2014-03-25
型別
Rust 通過屬性設定 crate 名稱、版本和型別
2020-03-03
Rust型別
Rust 透過屬性設定 crate 名稱、版本和型別
2020-03-03
Rust型別
maxlength和size屬性區別
2017-02-07
KEEP POOL和CACHE屬性的區別
2007-01-04