ES6：字符串扩展

版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。

本文链接： https://blog.csdn.net/qq_39025670/article/details/100058706

本文介绍了 ES6 字符串扩展中常用的部分知识：

• 判断一个字符串中是否包含另一个字符串：includes()、startsWith()、endsWith()
• 重复字符串：repeat()
• 字符串补全长度：padStart()、padEnd()
• 模板字符串

一. includes()、startsWith()、endsWith()

以前，我们一般用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个字符

二.repeat()

repeat方法返回一个新的字符串，表示将字符串重复n次。

'hi'.repeat(2) // 'hihi'

三.padStart()、padEnd()

ES2017中新增的字符串补全长度的功能。padStart()用于头部补全，padEnd()用于尾部补全。

'x'.padStart(4, 'ab') // 'abax'

'x'.padEnd(4, 'ab') // 'xaba'

比如，我们可以用来补全月份

'1'.padStart(2, '0') // '01'

四.模板字符串

我们在拼接一段html代码的时候，会发现写法相当麻烦，会用到大量加号连接。但，若我们使用模板字符串就相当简单了

let name = 'Tom';
let htmlSrc = `
  <div>
    <p>hello, my name is ${name}</p>
  </div>
`

这样看起来是否就舒服多了，同时，也能很方便的插入值。

继续上面这段代码，如果我们要消除元素标签之间的换行，可以使用trim方法

htmlSrc.trim()

模板字符串中除了能调用变量外，还可以调用方法

function getName() {
  return 'Tom'
}
let htmlSrc = `
  <div>
    <p>hello, my name is ${getName()}</p>
  </div>
`

若要在模板字符串中使用反引号，则要使用反斜杠转义

let name = `hi, `\Tom`\`; // 'hi, `Tom`'

最后，补充一点，模板字符串的一个应用：防止XSS攻击（过滤掉html代码），这里不详细介绍。