本文實(shí)例講述了ES6新特性之字符串的擴(kuò)展。分享給大家供大家參考,具體如下:
一、ES5字符串函數(shù)
concat: 將兩個(gè)或多個(gè)字符的文本組合起來,返回一個(gè)新的字符串。
indexOf: 返回字符串中一個(gè)子串第一處出現(xiàn)的索引(從左到右搜索)。如果沒有匹配項(xiàng),返回 -1 。
charAt: 返回指定位置的字符。
lastIndexOf: 返回字符串中一個(gè)子串最后一處出現(xiàn)的索引(從右到左搜索),如果沒有匹配項(xiàng),返回 -1 。
match: 檢查一個(gè)字符串匹配一個(gè)正則表達(dá)式內(nèi)容,如果么有匹配返回 null。
substring: 返回字符串的一個(gè)子串,傳入?yún)?shù)是起始位置和結(jié)束位置。
substr: 返回字符串的一個(gè)子串,傳入?yún)?shù)是起始位置和長(zhǎng)度
replace: 用來查找匹配一個(gè)正則表達(dá)式的字符串,然后使用新字符串代替匹配的字符串。
search: 執(zhí)行一個(gè)正則表達(dá)式匹配查找。如果查找成功,返回字符串中匹配的索引值。否則返回 -1 。
slice: 提取字符串的一部分,并返回一個(gè)新字符串(與 substring 相同)。
split: 通過將字符串劃分成子串,將一個(gè)字符串做成一個(gè)字符串?dāng)?shù)組。
length: 返回字符串的長(zhǎng)度,所謂字符串的長(zhǎng)度是指其包含的字符的個(gè)數(shù)。
toLowerCase: 將整個(gè)字符串轉(zhuǎn)成小寫字母。
toUpperCase: 將整個(gè)字符串轉(zhuǎn)成大寫字母。
二、ES6新增常用函數(shù)
傳統(tǒng)上,Javascript只有indexOf方法,可以用來確定一個(gè)字符串是否包含在另一個(gè)字符串中。ES6又提供了三種新方法。
includes():返回布爾值,表示是否找到了參數(shù)字符串。
startsWith():返回布爾值,表示參數(shù)字符串是否在源字符串的頭部。
endsWith():返回布爾值,表示參數(shù)字符串是否在源字符串的尾部。
var s = 'Hello world!';s.startsWith('Hello') // trues.endsWith('!') // trues.includes('o') // truerepeat(): 返回一個(gè)新字符串,表示將原字符串重復(fù)n次。
'x'.repeat(3) // "xxx"'hello'.repeat(2) // "hellohello"'na'.repeat(0) // ""'na'.repeat(2.9) // "nana"'na'.repeat(Infinity)// RangeError'na'.repeat(-1)// RangeError'na'.repeat(-0.9) // ""
參數(shù)如果是小數(shù),會(huì)被取整(向下取整)。
參數(shù)是負(fù)數(shù)或者Infinity,會(huì)報(bào)錯(cuò)。
參數(shù)是0到-1之間的小數(shù),則等同于0,這是因?yàn)闀?huì)先進(jìn)行取整運(yùn)算。0到-1之間的小數(shù),取整以后等于-0,repeat視同為0。
參數(shù)NaN等同于0。
ES7推出了字符串補(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'
如果原字符串的長(zhǎng)度,等于或大于指定的最小長(zhǎng)度,則返回原字符串。
如果用來補(bǔ)全的字符串與原字符串,兩者的長(zhǎng)度之和超過了指定的最小長(zhǎng)度,則會(huì)截去超出位數(shù)的補(bǔ)全字符串。
如果省略第二個(gè)參數(shù),則會(huì)用空格補(bǔ)全長(zhǎng)度。
三、模板字符串
1. 多行字符串
傳統(tǒng)的Javascript語言,輸出模板通常是這樣寫的。
$('#result').append( 'There are <b>' + basket.count + '</b> ' + 'items in your basket, ' + '<em>' + basket.onSale + '</em> are on sale!');上面這種寫法相當(dāng)繁瑣不方便,ES6引入了模板字符串解決這個(gè)問題。
$('#result').append(` There are <b>${basket.count}</b> items in your basket, <em>${basket.onSale}</em> are on sale!`);模板字符串(template string)是增強(qiáng)版的字符串,用反引號(hào)(`)標(biāo)識(shí)。它可以當(dāng)作普通字符串使用,也可以用來定義多行字符串,或者在字符串中嵌入變量。
如果使用模板字符串表示多行字符串,所有的空格和縮進(jìn)都會(huì)被保留在輸出之中。
2.嵌入變量
模板字符串中嵌入變量,需要將變量名寫在${}之中。
// 字符串中嵌入變量var name = "Bob", time = "today";`Hello ${name}, how are you ${time}?`3.調(diào)用函數(shù)
模板字符串之中還能調(diào)用函數(shù)。
function fn() { return "Hello World";}`foo ${fn()} bar`// foo Hello World bar如果大括號(hào)中的值不是字符串,將按照一般的規(guī)則轉(zhuǎn)為字符串。比如,大括號(hào)中是一個(gè)對(duì)象,將默認(rèn)調(diào)用對(duì)象的toString方法。
如果模板字符串中的變量沒有聲明,將報(bào)錯(cuò)。
如果大括號(hào)內(nèi)部是一個(gè)字符串,將會(huì)原樣輸出。
`Hello ${'World'}`// "Hello World"希望本文所述對(duì)大家ECMAscript程序設(shè)計(jì)有所幫助。
新聞熱點(diǎn)
疑難解答