ES6 Series Three: Extension of Strings

"Code tailor" provides technical-related information and a series of basic articles for front-end developers. Follow the "Novices of Xiaohe Mountain" public account on WeChat to get the latest articles in time.

Preface

Before starting to learn, what we want to tell you is that this article is a summary of chapter 1607a877a7bc17 "Extension of Strings" "Introduction to ECMAScript6". If you have mastered the following knowledge items, you can skip it This link directly enters the exercise

• Template string
• String traversal interface
• New methods for strings

If you have forgotten some parts, 👇🏻 is ready for you!

Learning link

Extended learning of

New method of string

Summary

Template string

Is an enhanced version of the string, identified by backticks (`). It can be used as an ordinary string, can also be used to define a multi-line string, or embed variables in the string

grammar

// 普通字符串
;`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}?`

description

Template strings use backquotes () instead of double quotation marks and single quotation marks in ordinary strings. They can be used as ordinary strings, and can also be used to define multi-line strings or embed variables in strings.

If you need to use backticks in the template string, use a backslash to escape it.

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

Multi-line string

Any characters inserted in the new line are part of the template string. Using a normal string, you can obtain a multi-line string in the following ways:

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

To obtain a multi-line string with the same effect, just use the following code:

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

Insert expression

To embed expressions in ordinary strings, the following syntax must be used:

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

Now through the template string, we can use a more elegant way to express:

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

String traversal interface

ES6 adds an iterator interface for strings (see the "Iterator" section for details), so that strings can be traversed for...of

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

New methods for strings

No need to remember, just query when you use it

• includes(): returns a Boolean value, indicating whether the parameter string is found.
• startsWith(): returns a Boolean value, indicating whether the parameter string is at the head of the original string.
• endsWith(): returns a Boolean value, indicating whether the parameter string is at the end of the original string.
• repeat(): The method returns a new string, which means repeating the original string n times.
• padStart(): Used for head completion.
• padEnd(): Used for tail completion.
• trimStart(): Eliminate spaces at the head of the string.
• trimEnd(): Eliminate trailing spaces.
• matchAll(): method returns all matches of a regular expression in the current string
• replaceAll(): You can replace all matches at once

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'

Self-test

One: What is the output result of the following code ()

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

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

Problem analysis

One,

Answer：A

${FirstName + SecondName} can be introduced through 0607a877a7c14e, and the calculated value will be returned after the calculation.

ES 6 series of string expansion, we are over here, thank you for your support to the author! Your attention and praise will be the strongest driving force for us to move forward! thank you all!