ES6 系列三：字符串的擴展

"Code tailor"，爲前端開發者提供技術相關資訊以及系列基礎文章，微信關注「小和山的菜鳥們」公衆號，及時獲取最新文章。

前言

在開始學習以前，咱們想要告訴您的是，本文章是對阮一峯《ECMAScript6 入門》一書中 "字符串的擴展" 章節的總結，若是您已掌握下面知識事項，則可跳過此環節直接進入題目練習

• 模板字符串
• 字符串的遍歷接口
• 字符串的新增方法

若是您對某些部分有些遺忘，👇🏻 已經爲您準備好了！

學習連接

字符串的擴展學習

字符串的新增方法

彙總總結

模板字符串

是加強版的字符串，用反引號（`）標識。它能夠看成普通字符串使用，也能夠用來定義多行字符串，或者在字符串中嵌入變量

語法

// 普通字符串
;`In JavaScript '\n' is a line-feed.` // 多行字符串
`In JavaScript this is
 not legal.`

console.log(`xhs-rookies 1
xhs-rookies 2`)

// 字符串中嵌入變量
let name = 'xhs-rookies'
let time = 'today'
;`Hello ${name}, how are you ${time}?`

描述

模板字符串使用反引號 () 來代替普通字符串中的用雙引號和單引號，能夠看成普通字符串使用，也能夠用來定義多行字符串，或者在字符串中嵌入變量。

若是在模板字符串中須要使用反引號，則前面要用反斜槓轉義。

;`\`` === '`' // --> true

多行字符串

在新行中插入的任何字符都是模板字符串中的一部分，使用普通字符串，你能夠經過如下的方式得到多行字符串：

console.log('xhs-rookies 1\n' + 'xhs-rookies 2')
// "xhs-rookies 1
// xhs-rookies 2"

要得到一樣效果的多行字符串，只需使用以下代碼：

console.log(`xhs-rookies 1
xhs-rookies 2`)
// "xhs-rookies 1
// xhs-rookies 2"

插入表達式

在普通字符串中嵌入表達式，必須使用以下語法：

var a = 5
var b = 5
console.log('Ten is ' + (a + b) + ' and\nnot ' + (2 * a + b) + '.')
// "Ten is 15 and
// not 15."

如今經過模板字符串，咱們可使用一種更優雅的方式來表示：

var a = 5
var b = 5
console.log(`Ten is ${a + b} and
not ${2 * a + b}.`)
// "Ten is 10 and
// not 15."

字符串的遍歷接口

ES6 爲字符串添加了遍歷器接口（詳見《Iterator》一節），使得字符串能夠被 for...of 循環遍歷

for (let codePoint of 'xhs') {
  console.log(codePoint)
}
// "x"
// "h"
// "s"

字符串的新增方法

沒必要記憶，使用時查詢便可

• includes()：返回布爾值，表示是否找到了參數字符串。
• startsWith()：返回布爾值，表示參數字符串是否在原字符串的頭部。
• endsWith()：返回布爾值，表示參數字符串是否在原字符串的尾部。
• repeat()：方法返回一個新字符串，表示將原字符串重複 n 次。
• padStart()：用於頭部補全。
• padEnd()：用於尾部補全。
• trimStart()：消除字符串頭部的空格。
• trimEnd()：消除尾部的空格。
• matchAll()：方法返回一個正則表達式在當前字符串的全部匹配
• replaceAll()：能夠一次性替換全部匹配

let s = 'Hello world!'

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

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

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

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

'aabbcc'.replace(/b/g, '_') // 'aa__cc'

題目自測

一: 以下代碼的輸出結果爲何（）

let FirstName = 'James '
let SecondName = 'Potter'
console.log(`His name is ${FirstName + SecondName}`)

• A: His name is James Potter
• B: His name is FirstNameSecondName

題目解析

1、

Answer：A

經過${FirstName + SecondName}能夠引入計算，經過計算後返回計算好的數值。

ES 6 系列的 字符串的擴展，咱們到這裏結束啦，謝謝各位對做者的支持！大家的關注和點贊，將會是咱們前進的最強動力！謝謝你們！