ES6 中的字符串扩展功能

在 ES6 中，字符串的功能得到了极大的扩展，这些功能包括字符串拼接、模板字符串、字符串的一些新方法等等。本文将详细介绍 ES6 中的字符串扩展功能，并提供示例代码。

字符串模板

ES6 提供了一种新的字符串类型，被称为模板字符串。模板字符串使用反引号 ` \ 包围，使得我们可以在其中插入变量或表达式。

const name = "Alice";
const greeting = `Hello, ${name}!`;
console.log(greeting); // "Hello, Alice!"

模板字符串中的表达式可以使用任意 JavaScript 表达式。在表达式周围使用一对大括号 {} 即可，注意不能使用分号。

const x = 10, y = 20;
const sum = `${x} + ${y} = ${x + y}`;
console.log(sum); // "10 + 20 = 30"

字符串拓展方法

字符串重复

ES6 为字符串添加了 repeat() 方法，可以将一个字符串重复若干次，返回一个新字符串。如果参数传入小数或负数，则会被自动转为 0。

const str = "123";
console.log(str.repeat(3)); // "123123123"
console.log(str.repeat(0)); // ""
console.log(str.repeat(-1)); // ""

字符串是否包含

ES6 为字符串添加了 includes() 方法，可以判断一个字符串是否包含另一个字符串，返回布尔值。第二个参数表示开始搜索的位置。

const str = "hello world";
console.log(str.includes("world")); // true
console.log(str.includes("hello", 1)); // false

字符串是否以指定字符串开头/结尾

ES6 为字符串添加了 startsWith() 和 endsWith() 方法，用于判断一个字符串是否以指定字符串开头或结尾，返回布尔值。第二个参数表示开始搜索的位置。

const str = "hello world";
console.log(str.startsWith("hello")); // true
console.log(str.endsWith("world")); // true
console.log(str.startsWith("world", 6)); // true
console.log(str.endsWith("hello", 5)); // true

字符串补全

ES6 为字符串添加了 padStart() 和 padEnd() 方法，用于将一个字符串补全为指定长度，返回一个新字符串。第一个参数是目标长度，第二个参数是用于补全的字符串，默认为空格。

const str = "abc";
console.log(str.padStart(6, "*")); // "**abc"
console.log(str.padEnd(6, "*")); // "abc**"

总结

ES6 中的字符串扩展功能简化了字符串处理的过程，并增强了可读性和可维护性。利用这些字符串新特性，我们可以更便捷地实现前端开发中的字符串操作。

来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/65a86d8fadd4f0e0ff18e8d8