字符串的扩展 —— ES6基础总结（四）

图谱

ES6给字符串都引入了哪些新功能呢？

模板字符串

1. 可当做普通字符串；
2. 可定义多行字符串；
3. 可在字符串中嵌入变量。

    let year = new Date().getFullYear()
    let language = 'es6'
    let before = '欢迎学习' + language + ' —— ' + year  // 欢迎学习es6 —— 2019
    let after = `欢迎学习${language} —— ${year}`    // 欢迎学习es6 —— 2019 

新增API

包含

1. includes(str)

   是否找到了参数字符串。

2. startsWith(str)

   参数字符串是否在原字符串的头部。

3. endsWith(str)

   参数字符串是否在原字符串的尾部。

   • str: 要查找的字符串。

    let str = 'https://www.baidu.com/'
    str.includes('baidu')   // true
    str.startsWith('https')     // true
    str.endsWith('com/')    // true

补全

1. padStart(n, str)

   字符串不够指定长度，会在头部补全。

2. padEnd(n, str)

   字符串不够指定长度，会在尾部补全。

   • n: 字符串补全生效的最大长度；
   • str: 用来补全的字符串。

    let str = '9999'
    str.padStart(6, 0)      // 009999
    str.padEnd(6, 0)    // 999900

重复

1. repeat(n)

   将原字符串重复n次。

   • n: 要重复的次数。

     (1).小数取整；

     (2).Infinity或负数报错；

     (3).字符串会先转为数字；

     (4).NaN 相当于0。

     '$'.repeat(9)      // ????$
     '$'.repeat('9')      // ????$
     '$'.repeat(NaN)    // ''
     '$'.repeat(Infinity)       // Uncaught RangeError: Invalid count value

取消空格

1. trimStart() / trimLeft()

2. trimEnd() / trimRight()

   返回消除空格后的新字符串，不会修改原始字符串。

    let str = '   hello   '
    
    str.trim()      // "hello"
    
    str.trimStart()     // "hello   "
    str.trimLeft()      // "hello   "
    
    str.trimEnd()       // "   hello"
    str.trimRight()     // "   hello"

匹配

1. matchAll(reg)

   返回一个正则表达式在当前字符串的所有匹配。

   • reg: 正则表达式。

    let regexp = /t(e)(st(\d?))/g
    let str = 'test1test2'
    let arr = [...str.matchAll(regexp)]
    
    arr[0]      // ["test1", "e", "st1", "1", index: 0, input: "test1test2", groups: undefined]
    arr[1]      // ["test2", "e", "st2", "2", index: 5, input: "test1test2", groups: undefined]

参考

ECMAScript 6 入门

小结

本文主要介绍了ES6中对字符串引入的一些常用功能。

感谢阅读，如有问题，欢迎指正。