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

·  阅读 221
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 系列的 字符串的扩展,我们到这里结束啦,谢谢各位对作者的支持!你们的关注和点赞,将会是我们前进的最强动力!谢谢大家!

分类:
前端
标签:
收藏成功!
已添加到「」, 点击更改