ES6字符串擴展

前面的話

　　字符串是編程中重要的數據類型，只有熟練掌握字符串操作才能更高效地開發程序。JS字符串的特性總是落后於其它語言，例如，直到 ES5 中字符串才獲得了 trim() 方法。而 ES6 則繼續添加新功能以擴展 JS 解析字符串的能力。本文將詳細介紹ES6中字符串擴展

 

子串識別

　　自從 JS 引入了 indexOf() 方法，開發者們就使用它來識別字符串是否存在於其它字符串中。ES6 包含了以下三個方法來滿足這類需求：includes()、startsWith()、endsWith()

【includes()】

　　該方法在給定文本存在於字符串中的任意位置時會返回 true ，否則返回false

【startsWith()】

　　該方法在給定文本出現在字符串起始處時返回 true ，否則返回 false

【endsWith()】

　　該方法在給定文本出現在字符串結尾處時返回 true ，否則返回 false 

　　以上每個方法都接受兩個參數：需要搜索的文本，以及可選的搜索起始位置索引

　　當提供了第二個參數(假設為n)時， includes() 與 startsWith() 方法會從該索引位置(n)開始嘗試匹配；而endsWith() 方法則從字符串長度減去這個索引值的位置開始嘗試匹配

　　當第二個參數未提供時， includes() 與 startsWith() 方法會從字符串起始處開始查找，而 endsWith() 方法則從尾部開始。實際上，第二個參數減少了搜索字符串的次數

var msg = "Hello world!";
console.log(msg.startsWith("Hello")); // true
console.log(msg.endsWith("!")); // true
console.log(msg.includes("o")); // true

console.log(msg.startsWith("o")); // false
console.log(msg.endsWith("world!")); // true
console.log(msg.includes("x")); // false

console.log(msg.startsWith("o", 4)); // true
console.log(msg.endsWith("o", 5)); // true
console.log(msg.includes("o", 8)); // false

　　雖然這三個方法使得判斷子字符串是否存在變得更容易，但它們只返回了一個布爾值。若需要找到它們在字符串中的確切位置，則需要使用 indexOf() 和 lastIndexOf() 

　　[注意]如果向 startsWith() 、 endsWith() 或 includes() 方法傳入了正則表達式而不是字符串，會拋出錯誤。而對於indexOf()和lastIndexOf()這兩個方法，它們會將正則表達式轉換為字符串並搜索它

 

字符串重復

【repeat()】

　　ES6為字符串添加了一個 repeat() 方法，它接受一個參數作為字符串的重復次數，返回一個將初始字符串重復指定次數的新字符串

console.log("x".repeat(3)); // "xxx"
console.log("hello".repeat(2)); // "hellohello"
console.log("abc".repeat(4)); // "abcabcabcabc"

　　參數如果是小數，會被取整

console.log('na'.repeat(2.9)); // "nana"

　　如果repeat的參數是負數或者Infinity，會報錯

//Uncaught RangeError: Invalid count value
console.log('na'.repeat(Infinity));
//Uncaught RangeError: Invalid count value
console.log('na'.repeat(-1));

　　如果參數是0到-1之間的小數，則等同於0，這是因為會先進行取整運算。0到-1之間的小數，取整以后等於-0，repeat視同為0

console.log('na'.repeat(-0.9)); // ""

　　參數NaN等同於0

console.log('na'.repeat(NaN)); // ""

　　如果repeat的參數是字符串，則會先轉換成數字

console.log('na'.repeat('na')); // ""
console.log('na'.repeat('3'));  // "nanana"

【創建縮進級別】

　　此方法比相同目的的其余方法更加方便，在操縱文本時特別有用，尤其是在需要產生縮進的代碼格式化工具中

// 縮進指定數量的空格
var indent = " ".repeat(4),
indentLevel = 0;
// 需要增加縮進時
var newIndent = indent.repeat(++indentLevel);

　　調用第一個repeat()方法創建了一個包含四個空格的字符串，indentLevel變量用來持續追蹤縮進的級別。此后，可以通過增加indentLevel的值來調用repeat() 方法，從而改變空格數量

 

字符串補全

　　ES2017 引入了字符串補全長度的功能。如果某個字符串不夠指定長度，會在頭部或尾部補全

【padStart()】

　　頭部補全

【padEnd()】

　　尾部補全

　　padStart()和padEnd()一共接受兩個參數，第一個參數用來指定字符串的最小長度，第二個參數是用來補全的字符串

'x'.padStart(5, 'ab') // 'ababx'
'x'.padStart(4, 'ab') // 'abax'

'x'.padEnd(5, 'ab') // 'xabab'
'x'.padEnd(4, 'ab') // 'xaba'

　　如果省略第二個參數，默認使用空格補全長度

'x'.padStart(4) // '   x'
'x'.padEnd(4) // 'x   '

　　如果原字符串的長度，等於或大於指定的最小長度，則返回原字符串

'xxx'.padStart(2, 'ab') // 'xxx'
'xxx'.padEnd(2, 'ab') // 'xxx'

　　如果用來補全的字符串與原字符串，兩者的長度之和超過了指定的最小長度，則會截去超出位數的補全字符串

'abc'.padStart(10, '0123456789')// '0123456abc'

【應用】

　　padStart的常見用途是為數值補全指定位數。下面代碼生成10位的數值字符串

'1'.padStart(10, '0') // "0000000001"
'12'.padStart(10, '0') // "0000000012"
'123456'.padStart(10, '0') // "0000123456"

　　另一個用途是提示字符串格式

'12'.padStart(10, 'YYYY-MM-DD') // "YYYY-MM-12"
'09-12'.padStart(10, 'YYYY-MM-DD') // "YYYY-09-12"

 轉自-http://www.cnblogs.com/xiaohuochai/p/7231004.html