ES6新特性之字符串的示例分析

這篇文章主要介紹了ES6新特性之字符串的示例分析，具有一定借鑒價值，感興趣的朋友可以參考下，希望大家閱讀完這篇文章之后大有收獲，下面讓小編帶著大家一起了解一下。

一、ES5字符串函數(shù)

concat: 將兩個或多個字符的文本組合起來，返回一個新的字符串。
indexOf: 返回字符串中一個子串第一處出現(xiàn)的索引（從左到右搜索）。如果沒有匹配項，返回 -1 。
charAt: 返回指定位置的字符。
lastIndexOf: 返回字符串中一個子串最后一處出現(xiàn)的索引（從右到左搜索），如果沒有匹配項，返回 -1 。
match: 檢查一個字符串匹配一個正則表達(dá)式內(nèi)容，如果么有匹配返回 null。
substring: 返回字符串的一個子串，傳入?yún)?shù)是起始位置和結(jié)束位置。
substr: 返回字符串的一個子串，傳入?yún)?shù)是起始位置和長度
replace: 用來查找匹配一個正則表達(dá)式的字符串，然后使用新字符串代替匹配的字符串。
search: 執(zhí)行一個正則表達(dá)式匹配查找。如果查找成功，返回字符串中匹配的索引值。否則返回 -1 。
slice: 提取字符串的一部分，并返回一個新字符串（與 substring 相同）。
split: 通過將字符串劃分成子串，將一個字符串做成一個字符串?dāng)?shù)組。
length: 返回字符串的長度，所謂字符串的長度是指其包含的字符的個數(shù)。
toLowerCase: 將整個字符串轉(zhuǎn)成小寫字母。
toUpperCase: 將整個字符串轉(zhuǎn)成大寫字母。

二、ES6新增常用函數(shù)

傳統(tǒng)上，JavaScript只有indexOf方法，可以用來確定一個字符串是否包含在另一個字符串中。ES6又提供了三種新方法。

includes()：返回布爾值，表示是否找到了參數(shù)字符串。
startsWith()：返回布爾值，表示參數(shù)字符串是否在源字符串的頭部。
endsWith()：返回布爾值，表示參數(shù)字符串是否在源字符串的尾部。

var s = 'Hello world!';
s.startsWith('Hello') // true
s.endsWith('!') // true
s.includes('o') // true

repeat(): 返回一個新字符串，表示將原字符串重復(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ù)，會被取整(向下取整)。
參數(shù)是負(fù)數(shù)或者Infinity，會報錯。
參數(shù)是0到-1之間的小數(shù)，則等同于0，這是因為會先進(jìn)行取整運算。0到-1之間的小數(shù)，取整以后等于-0，repeat視同為0。
參數(shù)NaN等同于0。

ES7推出了字符串補全長度的功能。如果某個字符串不夠指定長度，會在頭部或尾部補全。padStart用于頭部補全，padEnd用于尾部補全。padStart和padEnd一共接受兩個參數(shù)，第一個參數(shù)用來指定字符串的最小長度，第二個參數(shù)是用來補全的字符串。

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

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

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

如果省略第二個參數(shù)，則會用空格補全長度。

三、模板字符串

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引入了模板字符串解決這個問題。

$('#result').append(`
  There are <b>${basket.count}</b> items
   in your basket, <em>${basket.onSale}</em>
  are on sale!
`);

模板字符串（template string）是增強(qiáng)版的字符串，用反引號（`）標(biāo)識。它可以當(dāng)作普通字符串使用，也可以用來定義多行字符串，或者在字符串中嵌入變量。

如果使用模板字符串表示多行字符串，所有的空格和縮進(jìn)都會被保留在輸出之中。

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

如果大括號中的值不是字符串，將按照一般的規(guī)則轉(zhuǎn)為字符串。比如，大括號中是一個對象，將默認(rèn)調(diào)用對象的toString方法。

如果模板字符串中的變量沒有聲明，將報錯。

如果大括號內(nèi)部是一個字符串，將會原樣輸出。

`Hello ${'World'}`
// "Hello World"

感謝你能夠認(rèn)真閱讀完這篇文章，希望小編分享的“ES6新特性之字符串的示例分析”這篇文章對大家有幫助，同時也希望大家多多支持億速云，關(guān)注億速云行業(yè)資訊頻道，更多相關(guān)知識等著你來學(xué)習(xí)!