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

最新推荐文章于 2021-12-02 22:13:12 发布

原创最新推荐文章于 2021-12-02 22:13:12 发布 · 853 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#JavaScript

大前端专栏收录该内容

40 篇文章

订阅专栏

本文介绍ES6中新增的字符串处理方法，包括遍历器接口、includes、startsWith、endsWith、repeat、padStart、padEnd及模板字符串。这些新特性提高了字符串操作的效率和灵活性。

字符串的遍历器接口

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标准入门，有修改。