ES 6 系列三：字符串的扩展

快来加入我们吧！

"小和山的菜鸟们"，为前端开发者提供技术相关资讯以及系列基础文章。为更好的用户体验，请您移至我们官网小和山的菜鸟们 进行学习，及时获取最新文章。

"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

Answer

Answer：A

通过${FirstName + SecondName}可以引入计算，通过计算后返回计算好的数值。

ES 6 系列的 字符串的扩展，我们到这里结束啦，谢谢各位对作者的支持！你们的关注和点赞，将会是我们前进的最强动力！谢谢大家！