JavaScript字符串處理小結

讀取字符串中的單個字符

(1)charAt(idnex) 讀取字符串中索引爲index的字符。若是索引大於字符串長度，或者小於0會返回空字符串。

"hello world".charAt(1) //"e"
'abc'.charAt(-1) // ""
'abc'.charAt(3) // ""
var s = new String("hello world"); // 轉成字符串對象
複製代碼

（2）想數組同樣讀取

"hello world"[1]; // "e"
複製代碼

Unicode轉字符串String.fromCharCode()

fromCharCode默認支持2個字節，超過0xFFFF的部分會自動忽略，因此超過2個字節（漢字4個字節）須要轉成2個字節的表示。

String.fromCharCode(104, 101, 108, 108, 111)
//"hello"
String.fromCharCode(0xD842, 0xDFB7)
// "𠮷"
複製代碼

獲取字符串的長度

"hello".length; // 5
複製代碼

字符轉Unicode碼

charCodeAt獲取指定位置的字符的Unicode碼.若是參數爲負數，或大於等於字符串的長度，charCodeAt返回NaN。

"hello".charCodeAt(0) // 104
'abc'.charCodeAt(-1) // NaN
'abc'.charCodeAt(4) // NaN
複製代碼

字符串拼接 String.prototype.concat()

concat方法用於鏈接兩個字符串，返回一個新字符串，不改變原字符串。

var s1 = 'abc';
var s2 = 'def';

s1.concat(s2) // "abcdef"
s1 // "abc" 不發生改變
複製代碼

字符串截取

slice

slice方法用於從原字符串取出子字符串並返回，不改變原字符串。它的第一個參數是子字符串的開始位置，第二個參數是子字符串的結束位置（不含該位置）。

'JavaScript'.slice(0, 4) // "Java" 左閉右開
'JavaScript'.slice(2); // "vaScript" 只有一個數字的時候會從這個索引開始取到最後
//若是參數是負值，表示從結尾開始倒數計算的位置，即該負值加上字符串長度。
'JavaScript'.slice(-6) // "Script"
'JavaScript'.slice(0, -6) // "Java"
'JavaScript'.slice(-2, -1) // "p"
'JavaScript'.slice(2, 1) // "" 若是第一個參數大於第二個參數，slice方法返回一個空字符串。
複製代碼

substring

substring方法用於從原字符串取出子字符串並返回，不改變原字符串，跟slice方法很相像。以兩個參數中較小的爲起點較大的爲終點。

'JavaScript'.substring(0, 4) // "Java"
'JavaScript'.substring(4) // "Script"
'JavaScript'.substring(10, 4) // "Script"
// 等同於 會本身交換兩個數字，讓大的那個數字做爲終點
'JavaScript'.substring(4, 10) // "Script"
// 若是參數是負數會自動轉爲0
'Javascript'.substring(-3) // "JavaScript"
'JavaScript'.substring(4, -3) // "Java" 轉爲0以後就是 （4,0）會自動轉爲(0,4)
複製代碼

substr

substr方法用於從原字符串取出子字符串並返回，不改變原字符串，跟slice和substring方法的做用相同。
substr方法的第一個參數是子字符串的開始位置（從0開始計算），第二個參數是子字符串的長度。

'JavaScript'.substr(4, 6) // "Script" 
'JavaScript'.substr(4) // "Script" 省略第二個參數會 一直取到最後
// 若是第一個參數是負數，表示倒數計算的字符位置。
'JavaScript'.substr(-6) // "Script"
// 若是第二個參數是負數，將被自動轉爲0，所以會返回空字符串。
'JavaScript'.substr(4, -1) // ""
複製代碼

肯定一個字符串在另外一個字符串中出現的位置

• indexOf方法用於肯定一個字符串在另外一個字符串中第一次出現的位置,第一個參數是須要匹配的字符串，第二個參數是開始查找的索引，順着這個索引日後

• lastIndexOf用法和indexOf相似，可是從末尾開始匹配，第一個參數是須要匹配的字符串，第二個參數是開始查找的索引，順着這個索引往前

'hello world'.indexOf('o', 6) // 7
'hello world'.lastIndexOf('o', 6) // 4
複製代碼

刪除兩邊的空白符

trim方法用於去除字符串兩端的空白符，包括空格，製表符（\t、\v）、換行符（\n）和回車符（\r）。不改變原字符串

'\r\nabc \t'.trim() // 'abc'
複製代碼

大小寫轉換

'Hello World'.toLowerCase(); // 轉成小寫
// "hello world"

'Hello World'.toUpperCase(); // 轉成大寫
// "HELLO WORLD"
複製代碼

分割字符串

split方法按照給定規則分割字符串，返回一個由分割出來的子字符串組成的數組。第一個參數是分隔符，split方法還能夠接受第二個參數，限定返回數組的最大成員數。

'a|b|c'.split('|') // ["a", "b", "c"] 默認數組成員個數是所有
'a|b|c'.split('|', 2) // ["a", "b"] 數組最大個數是2個
複製代碼

字符串大小比較

（1）直接用 > < =
直接用運算符比較是按照字典序Unicode碼的順序比較

'B'>'a' // false
複製代碼

（2）localeCompare
localeCompare方法用於比較兩個字符串。它返回一個整數，若是小於0，表示第一個字符串小於第二個字符串；若是等於0，表示二者相等；若是大於0，表示第一個字符串大於第二個字符串。會按照天然語言的順序判斷

'B'.localeCompare('a') // 1 天然語言序是 B > a
複製代碼

正則匹配

構造正則表達式

(1)一種是使用字面量，以斜槓表示開始和結束。第二個斜槓後面是修飾符

var reg = /abc/g
複製代碼

(2)使用RegExp構造函數,第一個參數是正則表達式。第二個參數是修飾符

var reg = new RegExp('abc',g);
複製代碼

第一種方法在引擎編譯代碼時，就會新建正則表達式，第二種方法在運行時新建正則表達式，因此前者的效率較高。並且，前者比較便利和直觀，因此實際應用中，基本上都採用字面量定義正則表達式

修飾符和屬性

• i 默認狀況下，正則對象區分字母的大小寫，加上i修飾符之後表示忽略大小寫（ignorecase）。

• g 默認狀況下，第一次匹配成功後，正則對象就中止向下匹配了。g修飾符表示全局匹配（global），加上它之後，正則對象將匹配所有符合條件的結果，主要用於搜索和替換。

• m m修飾符表示多行模式（multiline），會修改^和$的行爲。默認狀況下（即不加m修飾符時），^和$匹配字符串的開始處和結尾處，加上m修飾符之後，^和$還會匹配行首和行尾，即^和$會識別換行符（\n）。

• RegExp.prototype.ignoreCase：返回一個布爾值，表示是否設置了i修飾符。

• RegExp.prototype.global：返回一個布爾值，表示是否設置了g修飾符。

• RegExp.prototype.multiline：返回一個布爾值，表示是否設置了m修飾符。

• RegExp.prototype.lastIndex：返回一個整數，表示下一次開始搜索的位置。該屬性可讀寫，可是隻在進行連續搜索時有意義。

• RegExp.prototype.source：返回正則表達式的字符串形式（不包括反斜槓），該屬性只讀

var r = /abc/igm;

r.ignoreCase // true
r.global // true
r.multiline // true
r.lastIndex // 0
r.source // "abc"
複製代碼

test

正則實例對象的test方法返回一個布爾值，表示當前模式是否能匹配參數字符串

/abc/.test("abcdef"); // true
複製代碼

若是正則表達式帶有g修飾符，則每一次test方法都從上一次結束的位置開始向後匹配。

var r = /x/g;
var s = '_x_x';

r.lastIndex // 0
r.test(s) // true

r.lastIndex // 2
r.test(s) // true

r.lastIndex // 4
r.test(s) // false
複製代碼

帶有g修飾符時，能夠經過正則對象的lastIndex屬性指定開始搜索的位置。

var r = /x/g;
var s = '_x_x';

r.lastIndex = 4;
r.test(s) // false

r.lastIndex // 0
r.test(s)
複製代碼

注意，帶有g修飾符時，正則表達式內部會記住上一次的lastIndex屬性，這時不該該更換所要匹配的字符串，不然會有一些難以察覺的錯誤。

var r = /bb/g;
r.test('bb') // true
r.test('-bb-') // false
複製代碼

exec

正則實例對象的exec方法，用來返回匹配結果。若是發現匹配，就返回一個數組，成員是匹配成功的子字符串，不然返回null。

var s = '_x_x';
var r1 = /x/;
var r2 = /y/;

r1.exec(s) // ["x"]
r2.exec(s) // null
複製代碼

exec方法的返回數組還包含如下兩個屬性：

• input：整個原字符串。

• index：整個模式匹配成功的開始位置（從0開始計數）。

var reg = /a/g;
var str = 'abc_abc_abc'

var r1 = reg.exec(str);
r1 // ["a"]
r1.index // 0
reg.lastIndex // 1

var r2 = reg.exec(str);
r2 // ["a"]
r2.index // 4
reg.lastIndex // 5

var r3 = reg.exec(str);
r3 // ["a"]
r3.index // 8
reg.lastIndex // 9

var r4 = reg.exec(str);
r4 // null
reg.lastIndex // 0
複製代碼

字符串中與正則有關的方法

• String.prototype.match()：返回一個數組，成員是全部匹配的子字符串。

• String.prototype.search()：按照給定的正則表達式進行搜索，返回一個整數，表示匹配開始的位置。

• String.prototype.replace()：按照給定的正則表達式進行替換，返回替換後的字符串。

• String.prototype.split()：按照給定規則進行字符串分割，返回一個數組，包含分割後的各個成員。

match

字符串實例對象的match方法對字符串進行正則匹配，返回匹配結果。

var s = '_x_x';
var r1 = /x/;
var r2 = /y/;

s.match(r1) // ["x"] 沒有設置g返回匹配的第一個
s.match(r2) // null 沒有匹配

var s = 'abba';
var r = /a/g;
s.match(r) // ["a", "a"]  使用g以後返回所有匹配的子串
複製代碼

search

字符串對象的search方法，返回第一個知足條件的匹配結果在整個字符串中的位置。若是沒有任何匹配，則返回-1。

'_x_x'.search(/x/)
// 1
複製代碼

replace

字符串對象的replace方法能夠替換匹配的值。它接受兩個參數，第一個是正則表達式，表示搜索模式，第二個是替換的內容。

'aaa'.replace('a', 'b') // "baa" 默認替換第一個
'aaa'.replace(/a/, 'b') // "baa"
'aaa'.replace(/a/g, 'b') // "bbb" g修飾符替換所有
複製代碼

replace方法的第二個參數可使用美圓符號$，用來指代所替換的內容。

• $&：匹配的子字符串。

• `$``：匹配結果前面的文本。

• $'：匹配結果後面的文本。

• $n：匹配成功的第n組內容，n是從1開始的天然數。

• $$：指代美圓符號$。

'hello world'.replace(/(\w+)\s(\w+)/, '$2 $1')
// "world hello"

'abc'.replace('b', '[$`-$&-$\']')
// "a[a-b-c]c"
複製代碼

匹配b 因此$&是b,b前面是a因此$``是a,b後面是是c因此$'是c<br />replace`方法的第二個參數還能夠是一個函數，將每個匹配內容替換爲函數返回值。

'3 and 5'.replace(/[0-9]+/g, function (match) {
  return 2 * match;
})
// "6 and 10"
複製代碼

做爲replace方法第二個參數的替換函數，能夠接受多個參數。其中，第一個參數是捕捉到的內容，第二個參數是捕捉到的組匹配（有多少個組匹配，就有多少個對應的參數）。此外，最後還能夠添加兩個參數，倒數第二個參數是捕捉到的內容在整個字符串中的位置（好比從第五個位置開始），最後一個參數是原字符串。下面是一個網頁模板替換的例子。

var prices = {
  'p1': '$1.99',
  'p2': '$9.99',
  'p3': '$5.00'
};

var template = '<span id="p1"></span>'
  + '<span id="p2"></span>'
  + '<span id="p3"></span>';

template.replace(
  /(<span id=")(.*?)(">)(<\/span>)/g,
  function(match, $1, $2, $3, $4){
    return $1 + $2 + $3 + prices[$2] + $4;
  }
);
// "<span id="p1">$1.99</span><span id="p2">$9.99</span><span id="p3">$5.00</span>"
複製代碼

split

字符串對象的split方法按照正則規則分割字符串，返回一個由分割後的各個部分組成的數組。
該方法接受兩個參數，第一個參數是正則表達式，表示分隔規則，第二個參數是返回數組的最大成員數。

// 非正則分隔
'a, b,c, d'.split(',')
// [ 'a', ' b', 'c', ' d' ]

// 正則分隔，去除多餘的空格
'a, b,c, d'.split(/, */)
// [ 'a', 'b', 'c', 'd' ]

// 指定返回數組的最大成員
'a, b,c, d'.split(/, */, 2)
[ 'a', 'b' ]
複製代碼