子串識(shí)別

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

【includes()】

　　該方法在給定文本存在于字符串中的任意位置時(shí)會(huì)返回 true ，否則返回false

【startsWith()】

　　該方法在給定文本出現(xiàn)在字符串起始處時(shí)返回 true ，否則返回 false

【endsWith()】

　　該方法在給定文本出現(xiàn)在字符串結(jié)尾處時(shí)返回 true ，否則返回 false?

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

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

　　當(dāng)?shù)诙€(gè)參數(shù)未提供時(shí)， includes() 與 startsWith() 方法會(huì)從字符串起始處開始查找，而 endsWith() 方法則從尾部開始。實(shí)際上，第二個(gè)參數(shù)減少了搜索字符串的次數(shù)

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

?

　　雖然這三個(gè)方法使得判斷子字符串是否存在變得更容易，但它們只返回了一個(gè)布爾值。若需要找到它們?cè)谧址械拇_切位置，則需要使用?indexOf()?和 lastIndexOf()?

　　[注意]如果向 startsWith() 、 endsWith() 或 includes() 方法傳入了正則表達(dá)式而不是字符串，會(huì)拋出錯(cuò)誤。而對(duì)于indexOf()和lastIndexOf()這兩個(gè)方法，它們會(huì)將正則表達(dá)式轉(zhuǎn)換為字符串并搜索它

?

字符串重復(fù)

【repeat()】

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

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

　　參數(shù)如果是小數(shù)，會(huì)被取整

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

　　如果repeat的參數(shù)是負(fù)數(shù)或者Infinity，會(huì)報(bào)錯(cuò)

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

　　如果參數(shù)是0到-1之間的小數(shù)，則等同于0，這是因?yàn)闀?huì)先進(jìn)行取整運(yùn)算。0到-1之間的小數(shù)，取整以后等于-0，repeat視同為0

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

　　參數(shù)NaN等同于0

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

　　如果repeat的參數(shù)是字符串，則會(huì)先轉(zhuǎn)換成數(shù)字

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

【創(chuàng)建縮進(jìn)級(jí)別】

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

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

　　調(diào)用第一個(gè)repeat()方法創(chuàng)建了一個(gè)包含四個(gè)空格的字符串，indentLevel變量用來持續(xù)追蹤縮進(jìn)的級(jí)別。此后，可以通過增加indentLevel的值來調(diào)用repeat() 方法，從而改變空格數(shù)量

?

字符串補(bǔ)全

　　ES2017 引入了字符串補(bǔ)全長(zhǎng)度的功能。如果某個(gè)字符串不夠指定長(zhǎng)度，會(huì)在頭部或尾部補(bǔ)全

【padStart()】

　　頭部補(bǔ)全

【padEnd()】

　　尾部補(bǔ)全

　　padStart()和padEnd()一共接受兩個(gè)參數(shù)，第一個(gè)參數(shù)用來指定字符串的最小長(zhǎng)度，第二個(gè)參數(shù)是用來補(bǔ)全的字符串

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

　　如果省略第二個(gè)參數(shù)，默認(rèn)使用空格補(bǔ)全長(zhǎng)度

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

　　如果原字符串的長(zhǎng)度，等于或大于指定的最小長(zhǎng)度，則返回原字符串

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

　　如果用來補(bǔ)全的字符串與原字符串，兩者的長(zhǎng)度之和超過了指定的最小長(zhǎng)度，則會(huì)截去超出位數(shù)的補(bǔ)全字符串

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

【應(yīng)用】

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

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

　　另一個(gè)用途是提示字符串格式

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

總結(jié)

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

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。