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