前端基礎(一)：字符串String常用操作

一、String 的屬性

1.1 length 屬性

獲取字符串的長度，需要特別注意的是：JavaScript 中的中文每個漢字也只代表一個字符，可能跟其他語言不同。

'中國'.length // 2 

1.2 prototype 屬性

在 OOP 中經常用到，用來給對象添加屬性或方法，且添加的屬性或方法在所有實例上共享。因此常用來擴展 JavaScript 對象，如下面的代碼給 String 添加了一個去除兩邊空格的方法。

String.prototype.trim = function(){ return this.replace(/^\s*|\s*$/g,''); } 

二、String 的方法

2.1 charAt(index)

獲取指定位置的字符串，從 0 到 str.length - 1

var str = 'abcdef'; charAt(2); // 'c' charAt(2); // '' 

2.2 charCodeAt(index)

返回指定位置字符的 unicode 編碼

var str = "abcde"; console.log(str.charCodeAt(0)); // 97 

2.3 查找類方法

2.31 indexOf(searchValue, fromIndex)

用來檢索指定的字符串首次出現的位置，fromIndex 可以省略，省略的話從 0 開始檢索。

var str = 'abcdeabcde'; str.indexOf('a'); // 0 str.indexOf('a', 3); // 5 str.indexOf('bc'); // 1 

2.32 includes(), startsWith(), endsWith()

傳統上，我們通常使用 indexOf 方法來確定，一個字符串是否包含在另一個字符串中。ES6 又提供了三種新方法。

• includes(): 返回布爾值，表示是否找到了參數字符串。
• startsWith(): 返回布爾值，表示參數字符串是否在原字符串的頭部。
• endsWith(): 返回布爾值，表示參數字符串是否在原字符串的尾部。

let str = 'Hello world!'; str.startsWith('Hello'); // true str.endsWith('!'); // true str.includes('o'); // true 

這三個方法都支持第二個參數，表示開始搜索的位置。

let str = 'Hello world!'; str.startsWith('world', 6); // true str.endsWith('Hello', 5); // true str.includes('Hello', 1); // false 

可見，使用第二個參數 n 時，endsWith 的行為與其他兩個方法不同。它針對前 n 個字符，而其他兩個方法針對從第 n 個位置直到字符串結束。

2.33 lastIndexOf(searchValue, fromIndex)

用來檢索指定的字符串最后出現的位置，檢索順序從后向前。

var str = 'abcdeabcde'; console.log(str.lastIndexOf('a')); // 5 console.log(str.lastIndexOf('a', 3)); // 0 從第索引3的位置往前檢索 console.log(str.lastIndexOf('bc')); // 6 

2.34 search()

str.search(subStr), str.search(regExp) 用於檢索字符串中指定的子字符串，或與正則表達式相匹配的子字符串。它返回第一個子字符串的起始位置，如未匹配到，則返回 -1。

var str = 'abcDEDF'; console.log(str.search('c')); // 2 console.log(str.search('d')); // -1 console.log(str.search(/d/i)); // 3 

2.35 match()

str.match(subStr), str.match(regExp) 在字符串內檢索指定的值，或找到一個(或多個)正則表達式的匹配。

如果參數中傳入的是子字符串或沒有全局匹配的正則表達式，則match方法從開始位置進行一次匹配，若未匹配到則返回null，否則返回一個數組。

var str = '1a2b3c4d5be'; console.log(str.match('h')); // null console.log(str.match('b')); // ["b", index: 3, input: "1a2b3c4d5e"] console.log(str.match(/b/)); // ["b", index: 3, input: "1a2b3c4d5e"] 

如果參數中傳入的是具有全局匹配的正則表達式，那么match從開始位置進行多次匹配，直到最后。如沒有匹配到結果，則返回null。否則返回一個數組，數組中存放所有復合要求的子字符串，且沒有index和input屬性。

var str = '1a2b3c4db5e'; console.log(str.match(/h/g)); // null console.log(str.match(/\d/g)); // ["1", "2", "3", "4", "5"] console.log(str.match(/b/g)); // ["b", "b"] 

2.4 截取類方法

2.41 substring(start, end)

這是最常用到的字符串截取方法，可接受兩個參數(參數不能為負)，分別是要截取的起始和結束位置。它將返回一個新的字符串，其內容是從start到end-1處的所有字符。若結束參數end省略，則表示從起始位置一直截取到最后。

var str = 'abcdefg'; console.log(str.substring(1, 4)); // bcd console.log(str.substring(1)); // bcdefg console.log(str.substring(-1)); // abcdefg，傳入負值時會視為0 

2.42 substr(start, length)

在字符串中抽取從start下標開始的指定長度的字符，其返回值是一個字符串，包含從start處開始的length個字符。若沒有指定length，則為從start處開始到結尾的字符。若start為負數，則表示從字符串尾部開始算起。

var str = 'abcdefg'; console.log(str.substr(1, 3)); // bcd console.log(str.substr(2)); // cdefg console.log(str.substr(-2, 4)); // fg，目標長度較大的話，以實際截取的長度為准 

2.43 slice(start, end)

slice() 方法與 substring() 類似，它傳入的兩個參數也分別對應着開始和結束位置。區別在於，slice 中的參數可以為負，若參數為負，則該參數規定的是從字符串尾部開始計算起的位置。也就是說，-1 指字符串的最后一個字符。

var str = 'abcdefg'; console.log(str.slice(1, 4)); // bcd console.log(str.slice(-3, -1)); // ef console.log(str.slice(1, -1)); // bcdef console.log(str.slice(-1, -3)); // "" 若傳入的參數有問題，則返回空 

2.5 其他方法

2.51 replace()

替換匹配的值，接受兩個參數，第一個是搜索模式，第二個是替換的內容。

// replace的一個應用，就是用來消除字符串首尾兩端的空格 var str = " hello world "; str.replace(/^\s+|\s+$/g, ''); 

replace() 方法的第二個參數還可以是個函數，將每一個匹配內容替換為函數返回值。

'3 and 5'.replace(/\d/g,function(match){ return 2 * match; }); // "6 and 10" 

2.52 split(separator, howmany)

該方法用於把字符串分割成字符串數組，第一個參數表示分割位置(參考符)，第二個參數表示返回數組的允許最大長度。

var str = 'a|b|c|d|e'; console.log(str.split('|')); // ["a", "b", "c", "d", "e"] console.log(str.split('|', 3)); // ["a", "b", "c"] console.log(str.split('')); // ["a", "|", "b", "|", "c", "|", "d", "|", "e"] 

也可以用正則來切割

var str = 'a1b2c3d4e'; console.log(str.split(/\d/)); // ["a", "b", "c", "d", "e"] 

2.53 toLowerCase() 和 toUpperCase()

字母大小寫轉化

var str = 'JavaScript'; console.log(str.toLowerCase()); // javascript console.log(str.toUpperCase()); // JAVASCRIPT