子串識別

　　自從 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")); // trueconsole.log(msg.startsWith("o")); // false console.log(msg.endsWith("world!")); // true console.log(msg.includes("x")); // falseconsole.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"

總結

以上是生活随笔為你收集整理的es6字符串扩展的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。