ES6字符串的擴展實例分析

本文小編為大家詳細介紹“ES6字符串的擴展實例分析”，內(nèi)容詳細，步驟清晰，細節(jié)處理妥當，希望這篇“ES6字符串的擴展實例分析”文章能幫助大家解決疑惑，下面跟著小編的思路慢慢深入，一起來學習新知識吧。

一、字符串的擴展

字符的 Unicode 表示法

ES6 加強了對 Unicode 的支持，允許采用\uxxxx形式表示一個字符，其中xxxx表示字符的 Unicode 碼點。

"\u0061"
// "a"

字符串的遍歷器接口

ES6 為字符串添加了遍歷器接口（詳見《Iterator》一章），使得字符串可以被for...of循環(huán)遍歷。

for (let codePoint of 'foo') {
  console.log(codePoint)
}
// "f"
// "o"
// "o"

模板字符串

傳統(tǒng)的 JavaScript 語言，輸出模板通常是這樣寫的（下面使用了 jQuery 的方法）。

$('#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!
`);

二、字符串的新增方法

includes(), startsWith(), endsWith()

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

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

let s = 'Hello world!';

s.startsWith('Hello') // true
s.endsWith('!') // true
s.includes('o') // true

這三個方法都支持第二個參數(shù)，表示開始搜索的位置。

let s = 'Hello world!';

s.startsWith('world', 6) // true
s.endsWith('Hello', 5) // true
s.includes('Hello', 6) // false

實例方法：repeat()

repeat方法返回一個新字符串，表示將原字符串重復n次。

'x'.repeat(3) // "xxx"
'hello'.repeat(2) // "hellohello"
'na'.repeat(0) // ""

實例方法：padStart()，padEnd()

ES2017 引入了字符串補全長度的功能。如果某個字符串不夠指定長度，會在頭部或尾部補全。padStart()用于頭部補全，padEnd()用于尾部補全。

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

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

實例方法：trimStart()，trimEnd()

ES2019 對字符串實例新增了trimStart()和trimEnd()這兩個方法。它們的行為與trim()一致，trimStart()消除字符串頭部的空格，trimEnd()消除尾部的空格。它們返回的都是新字符串，不會修改原始字符串。

const s = '  abc  ';

s.trim() // "abc"
s.trimStart() // "abc  "
s.trimEnd() // "  abc"

讀到這里，這篇“ES6字符串的擴展實例分析”文章已經(jīng)介紹完畢，想要掌握這篇文章的知識點還需要大家自己動手實踐使用過才能領(lǐng)會，如果想了解更多相關(guān)內(nèi)容的文章，歡迎關(guān)注億速云行業(yè)資訊頻道。