ES5與ES6字符串方法總結

ES5

檢索字符串

indexOf

與數組方法相似。

stringObject.indexOf(searchvalue,fromindex)

fromindex規定在字符串中開始檢索的位置。它的合法取值是 0 到 stringObject.length - 1。如省略該參數，則將從字符串的首字符開始檢索。

lastIndexOf

與indexOf相反。

indexOf和lastIndexOf方法對大小寫敏感！

截取字符串

slice(start, end)

1. start,要抽取的片段的起始下標，若是爲負，則從尾部算起。
2. end,要抽取的片斷的結尾的下標，若是爲負，則從尾部算起。

String.slice() 與 Array.slice() 類似

substring(start, stop)

1. start必需。要抽取的片段的起始下標，不能爲負。
2. stop可選。比要提取的子串的最後一個字符的位置多1，不能爲負。

若是參數 start 與 stop 相等，那返回一個空串。
若是 start 比 stop 大，那在提取子串以前會先交換這兩個參數。
若是同時爲負，則返回空串。
若是一個值爲負，則轉爲0，並且若是start 比 stop 大，會交換值。

substr(start, length) --不推薦

1. start,要抽取的片段的起始下標，若是爲負，則從尾部算起。
2. length,若是爲負，則轉爲0。

trim(),trimLeft(),trimRight()

去除首尾空格。

正則相關

split

把一個字符串分割成字符串數組。

stringObject.split(separator, howmany)     //separator必需，字符串或正則表達式

var str="How are you doing today?";
str.split(/\s+/);      //"How", "are", "you", "doing", "today?"

若是把空字符串 ("") 用做 separator，那麼 stringObject 中的每一個字符之間都會被分割。
String.split() 執行的操做與 Array.join 執行的操做是相反的。

match

可在字符串內檢索指定的值，或找到一個或多個正則表達式的匹配。

stringObject.match(searchvalue | reg)

字符串檢索

var str="Hello world!";
str.match('w');      //["w", index: 6, input: "Hello world!", groups: undefined]

正則檢索

// 全局匹配
var str="1 plus 2 equal 3";
str.match(/\d+/g);      //["1", "2", "3"]

var str="1 plus 2 equal 3";
str.match(/\d+/);      //["1", index: 0, input: "1 plus 2 equal 3", groups: undefined]

replace

用於在字符串中用一些字符替換另外一些字符，或替換一個與正則表達式匹配的子串。

stringObject.replace(reg | substr, replacement)

字符串替換

'aaaccc'.replace('ccc', 'b');    //'aaab'

'aaaccc'.replace('bbb', 'b');    //'aaaccc'

'aaaccc'.replace('a', 'b');     //"baaccc"

正則替換

'aaaccc'.replace(/\w/, 'b')     //"baaccc"

//全局匹配
'aaaccc'.replace(/\w/g, 'b')    //"bbbbbb"

replacement
replacement 能夠是字符串，也能夠是函數。可是 replacement 中的 $ 字符具備特定的含義。

字符	替換文本
字符	替換文本
$一、$二、...、$99	與 regexp 中的第 1 到第 99 個子表達式相匹配的文本。
$&	與 regexp 相匹配的子串。
$`	位於匹配子串左側的文本。
$'	位於匹配子串右側的文本。
$$	直接量符號。

'aa123BB'.replace(/([a-z]+)(\d+)([A-Z]+)/g, '$1'); // "aa"
'aa123BB'.replace(/([a-z]+)(\d+)([A-Z]+)/g, '$4'); // "$4"
    
'aa123BB'.replace(/([a-z]+)(\d+)([A-Z]+)/g, '$&'); //"aa123BB"
'aa123BB'.replace(/(\d+)/g, '$`'); //"aaaaBB"
'aa123BB'.replace(/(\d+)/g, "$'"); //"aaBBBB"
'aa123BB'.replace(/(\d+)/g, '$$'); //"aa$BB"

ECMAScript v3 規定，replace() 方法的參數 replacement 能夠是函數而不是字符串。在這種狀況下，每一個匹配都調用該函數，它返回的字符串將做爲替換文本使用。

'aaaccc'.replace(/\w/g, function() {
    return 'b';
});
//"bbbbbb"

'aaaccc'.replace(/\w/, function() {
    return 'b';
});
//"baaccc"

search

stringObject.search(searchvalue | reg)

'aaaccc'.search('ccc');    //3
'aaaccc'.search(/ccc/);    //3  
var str="Visit W3School!";
str.search(/W3School/);    //6

search() 對大小寫敏感

其餘

1. big() 用大號字體顯示字符串。
2. blink() 顯示閃動字符串。
3. bold() 使用粗體顯示字符串。
4. sup() 把字符串顯示爲上標。
5. sub() 把字符串顯示爲下標。
6. strike() 使用刪除線來顯示字符串。
7. small() 使用小字號來顯示字符串。
8. charAt() 返回在指定位置的字符。
9. charCodeAt() 返回在指定的位置的字符的 Unicode 編碼。
10. toLocaleLowerCase() 把字符串轉換爲小寫。
11. toLocaleUpperCase() 把字符串轉換爲大寫。
12. toLowerCase() 把字符串轉換爲小寫。
13. toUpperCase() 把字符串轉換爲大寫。
14. toSource() 表明對象的源代碼。
15. toString() 返回字符串。
16. valueOf() 返回某個字符串對象的原始值。

ES6

includes(), startsWith(), endsWith()

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

let s = 'Hello world!';

s.startsWith('world', 6);    // true
s.endsWith('Hello', 5);      // true
s.includes('Hello', 6);      // false
s.includes('o');             // true

repeat(value)

返回一個新字符串，表示將原字符串重複n次。

• 若是value數是負數或者Infinity，會報錯。可是，若是參數是 0 到-1 之間的小數，則等同於 0。
• 若是value是字符串，則會先轉換成數字。
• value爲NaN等同於 0。
• value若是是小數，會被取整。

'a'.repeat(3);     // "aaa"
'a'.repeat(-1);    //VM449:1 Uncaught RangeError: Invalid count value
'a'.repeat('3n');  //""
'a'.repeat('3');   //"aaa"
'a'.repeat(NaN);   //""
'a'.repeat(1.6);   //"a"

padStart()，padEnd()

• padStart(length， string)用於頭部補全。
• padEnd(length， string)用於尾部補全。

'aaa'.padStart(2, 'ab');            //"aaa"
'aaa'.padStart(10, '0123456789');   //"0123456aaa"
'aaa'.padStart(10)                  //"       aaa"
'aaa'.padEnd(6, 'cd')               //"aaacdc"

模板字符串

模板字符串（template string）是加強版的字符串，用反引號（`）標識。

let name = "Bob", time = "today";
`Hello ${name}, how are you ${time}?`    //"Hello Bob, how are you today?"

模板字符串中嵌入變量，須要將變量名寫在${}之中。

JS表達式，能夠進行運算，以及引用對象屬性

let x = 1;
let y = 2;
`${x} + ${y} = ${x + y}`        //"1 + 2 = 3"

var obj = { a: 'eee'}
`obj ${obj}`                   //"obj [object Object]"

調用函數

function fn() {
  return "Hello World";
}

`foo ${fn()} bar`             //"foo Hello World bar"

標籤模板

模板字符串能夠緊跟在一個函數名後面，該函數將被調用來處理這個模板字符串。這被稱爲「標籤模板」功能（tagged template）。

alert`123`;  等同於alert(123);

若是模板字符裏面有變量，就不是簡單的調用了，而是會將模板字符串先處理成多個參數，再調用函數。

let a = 5;
let b = 10;

function tag(s, v1, v2) {
  console.log(s);
  console.log(v1);
  console.log(v2);

  return "OK";
}

tag`Hello ${ a + b } world ${ a * b}`;
// 等同於 tag(['Hello ', ' world ', ''], 15, 50);

//["Hello ", " world ", "", raw: Array(3)]
//15
//50
//"OK"