本文實例講述了ES6新特性之字符串的擴展。分享給大家供大家參考,具體如下:
一、ES5字符串函數
concat: 將兩個或多個字符的文本組合起來,返回一個新的字符串。
indexOf: 返回字符串中一個子串第一處出現的索引(從左到右搜索)。如果沒有匹配項,返回 -1 。
charAt: 返回指定位置的字符。
lastIndexOf: 返回字符串中一個子串最後一處出現的索引(從右到左搜索),如果沒有匹配項,返回 -1 。
match: 檢查一個字符串匹配一個正則表達式內容,如果麼有匹配返回 null。
substring: 返回字符串的一個子串,傳入參數是起始位置和結束位置。
substr: 返回字符串的一個子串,傳入參數是起始位置和長度
replace: 用來查找匹配一個正則表達式的字符串,然後使用新字符串代替匹配的字符串。
search: 執行一個正則表達式匹配查找。如果查找成功,返回字符串中匹配的索引值。否則返回 -1 。
slice: 提取字符串的一部分,並返回一個新字符串(與 substring 相同)。
split: 通過將字符串劃分成子串,將一個字符串做成一個字符串數組。
length: 返回字符串的長度,所謂字符串的長度是指其包含的字符的個數。
toLowerCase: 將整個字符串轉成小寫字母。
toUpperCase: 將整個字符串轉成大寫字母。
二、ES6新增常用函數
傳統上,JavaScript只有indexOf方法,可以用來確定一個字符串是否包含在另一個字符串中。ES6又提供了三種新方法。
includes():返回布爾值,表示是否找到了參數字符串。
startsWith():返回布爾值,表示參數字符串是否在源字符串的頭部。
endsWith():返回布爾值,表示參數字符串是否在源字符串的尾部。
var s = 'Hello world!'; s.startsWith('Hello') // true s.endsWith('!') // true s.includes('o') // true
repeat(): 返回一個新字符串,表示將原字符串重復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) // ""
參數如果是小數,會被取整(向下取整)。
參數是負數或者Infinity,會報錯。
參數是0到-1之間的小數,則等同於0,這是因為會先進行取整運算。0到-1之間的小數,取整以後等於-0,repeat視同為0。
參數NaN等同於0。
ES7推出了字符串補全長度的功能。如果某個字符串不夠指定長度,會在頭部或尾部補全。padStart用於頭部補全,padEnd用於尾部補全。padStart和padEnd一共接受兩個參數,第一個參數用來指定字符串的最小長度,第二個參數是用來補全的字符串。
'x'.padStart(5, 'ab') // 'ababx' 'x'.padStart(4, 'ab') // 'abax' 'x'.padEnd(5, 'ab') // 'xabab' 'x'.padEnd(4, 'ab') // 'xaba'
如果原字符串的長度,等於或大於指定的最小長度,則返回原字符串。
如果用來補全的字符串與原字符串,兩者的長度之和超過了指定的最小長度,則會截去超出位數的補全字符串。
如果省略第二個參數,則會用空格補全長度。
三、模板字符串
1. 多行字符串
傳統的JavaScript語言,輸出模板通常是這樣寫的。
$('#result').append( 'There are <b>' + basket.count + '</b> ' + 'items in your basket, ' + '<em>' + basket.onSale + '</em> are on sale!' );
上面這種寫法相當繁瑣不方便,ES6引入了模板字符串解決這個問題。
$('#result').append(` There are <b>${basket.count}</b> items in your basket, <em>${basket.onSale}</em> are on sale! `);
模板字符串(template string)是增強版的字符串,用反引號(`)標識。它可以當作普通字符串使用,也可以用來定義多行字符串,或者在字符串中嵌入變量。
如果使用模板字符串表示多行字符串,所有的空格和縮進都會被保留在輸出之中。
2.嵌入變量
模板字符串中嵌入變量,需要將變量名寫在${}之中。
// 字符串中嵌入變量 var name = "Bob", time = "today"; `Hello ${name}, how are you ${time}?`
3.調用函數
模板字符串之中還能調用函數。
function fn() { return "Hello World"; } `foo ${fn()} bar` // foo Hello World bar
如果大括號中的值不是字符串,將按照一般的規則轉為字符串。比如,大括號中是一個對象,將默認調用對象的toString方法。
如果模板字符串中的變量沒有聲明,將報錯。
如果大括號內部是一個字符串,將會原樣輸出。
`Hello ${'World'}` // "Hello World"
希望本文所述對大家ECMAScript程序設計有所幫助。