ES6系列 字符串的扩展与新增方法

219 阅读2分钟

往期内容

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() // "  杨大侠"

希望大家能一块分享一些文章,在公众号里面私信我吧!