往期内容
ES6里面添加了模版字符串,这个方法令人兴奋,在工作中非常的实用,省去了拼接字符串的繁琐,字符串模版就像是在写一段文字一样方便。
const a = `生命在于`;
let b = `${a}颓废`
// 生命在于颓废
let c = 10;
consloe.log(`${c * 100}`)
let list = [1,3,4,5,6,7];
let template = `
<ul>
${list.map((item)=>{
return `<li>${item}</li>`
})}
</ul>
`
各种套路应用尽有
当你写React的时候有没有这样写过
let renderHtml = `<div>
<input
ref='input'
onChange='${this.handleChange}'
defaultValue='${this.state.value}' />
<div>${this.state.value}</div>
</div>
`
1.实例方法:includes(), startsWith(), endsWith()
传统上,JavaScript 只有indexOf方法,可以用来确定一个字符串是否包含在另一个字符串中。ES6 又提供了三种新方法。
-
includes():返回布尔值,表示是否找到了参数字符串。
-
startsWith():返回布尔值,表示参数字符串是否在原字符串的头部
-
endsWith():返回布尔值,表示参数字符串是否在原字符串的尾部。
let s = 'Hello world!';
s.startsWith('Hello') // true
s.endsWith('!') // true
s.includes('o') // true
这三个方法都支持第二个参数,表示开始搜索的位置。
let s = 'Hello world!';
s.startsWith('world', 6) // true
s.endsWith('Hello', 5) // true
s.includes('Hello', 6) // false
上面代码表示,使用第二个参数时,endsWith的行为与其他两个方法有所不同。它针对前N个字符,而其他两个方法针对从第N个位置直到字符串结束。
2.实例方法:padStart(),padEnd()
ES2017 引入了字符串补全长度的功能。如果某个字符串不够指定长度,会在头部或尾部补全。padStart()用于头部补全,padEnd()用于尾部补全。
'1'.padStart(5, '23') // '23231'
'1'.padStart(4, '23') // '2321'
上面代码中,padStart()、padEnd()、一共接受两个参数,第一个参数是字符串补全生效的最大长度,第二个参数是用来补全的字符串。
如果原字符串的长度,等于或大于最大长度,则字符串补全不生效,返回原字符串。
'111'.padStart(2, '23') // '111'
'111'.padEnd(2, '23') // '111'
如果用来补全的字符串与原字符串,两者的长度之和超过了最大长度,则会截去超出位数的补全字符串
'123'.padStart(10, '0123456789') //0123456123
3.实例方法:trim(), trimStart(),trimEnd()
ES2019 对字符串实例新增了 trimStart()、trimEnd()这两个方法。它们的行为与trim()一致,trimStart()消除字符串头部的空格,trimEnd()消除尾部的空格。它们返回的都是新字符串,不会修改原始字符串。
const s = ' 杨大侠 ';
s.trim() // "杨大侠"
s.trimStart() // "杨大侠 "
s.trimEnd() // " 杨大侠"
希望大家能一块分享一些文章,在公众号里面私信我吧!