String in ES6

Time:2022-2-20

String has always been the data with high usage in the programming language. Although the function is a first-class citizen in JS language, how can string be regarded as the second of the millennium? Let me discuss with you some new usage and features in ES6, especially in string splicing, which will liberate the eyes and hands of programmers. You can also focus on my WeChat official account.
Template string: replace traditional single quotation marks or double quotes.
1. Traditional string splicing

const str = "asasasas\n"
        +"sasasasasa\n"
        +"rrgtrgtegergre"
console. Log (STR) // a newline string is output at this time

2. String splicing in ES6

const str = `asasasas
        sasasasasa
        rrgtrgtegergre
        `
console. Log (STR) // output a string with exactly the same effect as the previous paragraph

3. Operation and splicing in traditional string

const a = 20
const b = 14
const c = "es"
Const STR = "my age is:" + (a + b) + ", I'm talking about" + C "
console. Log (STR) // my age is 34. I'm putting es

4. Operation and splicing in ES6 string: wrap variables through $and {} on the basis of using `. PS: I don’t know how many eye drops I saved when I was working on the small editing and reconstruction project. It’s really a great benefit.

const a = 20
const b = 14
const c = "es"
Const str5 = ` my age is ${a + B}, I'm talking about ${C}`
console. Log() // my age is 34. I'm putting es

2、 Nested templates: mainly for dynamic classes in tags. Xiaobian saw a large number of similar examples in the Vue project before. He didn’t understand it at that time. Now he knows what it is.
1. Traditional way

const isLarge = () => {
    return true
}

let class1 = 'icon'
class1 += isLarge()?' icon-big':" icon-small"
console.log(class1) // 'icon icon-big'

2. ES6 new way

const isLarge = () => {
    return true
}
const class1 = `icon icon-${isLarge()?' icon-big':" icon-small"}`
console.log(class1) // 'icon icon-big'

3、 Tagged template string

const foo = (a,b,c,d) =>{
    console.log(a)
    console.log(b)
    console.log(c)
    console.log(d)
}

foo(1,2,3,4) // 1 2 3 4

const name = "lilei"
const age = 34
Foo ` This is ${name}, his age is ${age} years ` / ["this is", ", his age is", "years"] Lilei 34 undefind

4、 Includes: judge whether the specified string is in other strings. If it exists, return true; if not, return false
//Indexof determines whether a string is contained in the string. If it exists, it returns the subscript corresponding to the string. If it does not exist, it returns – 1

const str = "1234"
console.log(str.indexOf("2")) // 1
const str = "1234"
console.log(str.includes("2")) // true

5、 Startswith: determines whether the custom string starts with the specified string and returns a Boolean value

const str = "1234"
console.log(str.startsWith("12")) // true

6、 Endswith: determines whether the custom string ends with the specified string and returns a Boolean value

conststr = "1234"
console.log(str.endsWith("12")) // false

7、 Repeat: repeats the specified string a specified number of times and returns a new string

const str = "1234"
const newStr = str.repeat(3)
console.log(newStr) // 123412341234

Recommended Today

Redis thread model

1、 Foreword Redis is an open source remote memory database (remote dictionary server). It not only has strong performance, but also provides five different types of data structures. Most of the problems we may encounter in project practice can be naturally mapped to these data structures. In addition, redis allows users to easily expand redis […]