ES6入门教程笔记(4)-字符串的扩展

深藏阁楼爱情的钟 2022-04-23 00:08 250阅读 0赞

## 字符串的遍历器接口 ##

ES6为字符串添加了遍历器接口，使字符串可以被`for...of`循环遍历。

for (let c of 'foo') {
        console.log(c);
    }
    // "f"
    // "o"
    // "o"

这个遍历器最大的优点是可以识别大于`0xFFFF`的Unicode码点，而传统的`for`循环无法识别这样的码点。

## includes(),startsWith(),endsWith() ##

传统JavaScript只有`indexOf`方法，用来确定一个字符串是否包含在另一个字符串中。ES6又提供了三种新方法。

*  includes(): 返回布尔值，表示是否找到了参数字符串。
 *  startsWith(): 返回布尔值，表示参数字符串是否在原字符串的头部。
 *  endsWith(): 返回布尔值，表示参数字符串是否在原字符串的尾部。

let s = 'Hello world!';
    
    s.includes('w') // true
    s.startsWith('Hello') // true
    s.endsWith('!') // true

这三个方法都支持第2个参数，表示开始搜索的位置。

let s = 'Hello world!';
    
    s.includes('Hello', 6) // false
    s.startsWith('world', 6) // true
    s.endsWith('Hello', 5) // true

上面代码中，使用第2个参数`n`时，`endsWith`的行为与其他两个方法不同，它针对前`n`个字符，而其它两个方法针对从第`n`个位置直到字符串结束。

## repeat() ##

`repeat`方法将原字符串重复`n`次，然后返回一个新字符串。

'x'.repeat(3) // "xxx"
    'hello'.repeat(2) // "hellohello"

## padStart(), padEnd() ##

ES6引入了字符串补全长度的功能。`padStart()`用于头部补全，`padEnd()`用于尾部补全。

它们都接受两个参数，第一个参数是字符串补全生效的最大长度，第二个参数是用来补全的字符串。

'x'.padStart(5, 'ab') // 'ababx'
    '5'.padStart(3, '0') // '005'
    
    'x'.padEnd(5, 'ab') // 'xabab'
    '5'.padEnd(3, '0') // '500'

如果省略第二个参数，默认使用空格补全长度。

'x'.padStart(4) // '   x'
    'x'.padEnd(4) // 'x   '

## 模板字符串 ##

模板字符串是增强版的字符串，用反引号（\`）标识。它可以定义普通字符串，也可以定义多行字符串，或者在字符串中嵌入变量。

// 普通字符串
    `In JavaScript '\n' is a line-feed.`
    
    // 多行字符串
    `In JavaScript this is
     not legal.`
    
    // 字符串中嵌入变量
    let name = 'Tom';
    let num = 100;
    let str = `${name} are ${num}?`; // "Tom are 100"

*注：本文原始内容来自 [ES6标准入门][ES6]，有修改。*

[ES6]: http://es6.ruanyifeng.com/