乐趣区

关于javascript: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

题目解析

一、

Answer:A

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

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

退出移动版