乐趣区

关于javascript:ES6-系列三字符串的扩展

jiezi

“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：A

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

ES 6 系列的 字符串的扩大，咱们到这里完结啦，谢谢各位对作者的反对！你们的关注和点赞，将会是咱们后退的最强能源！谢谢大家！

退出移动版