执行 JavaScript 字符串拼接的 3 种实用方法

摘要：本教程将教你如何在 JavaScript 中拼接字符串。

JavaScript 提供了多种选项，允许你拼接两个或多个字符串

• 使用 concat() 方法
• 使用 + 和 += 运算符
• 使用 模板字面量

1) 使用 concat() 方法

String.prototype.concat() 拼接两个或多个字符串参数，并返回一个新字符串

let newString = string.concat(...str);Code language: JavaScript (javascript)

concat() 接受任意数量的字符串参数，并返回一个包含组合字符串参数的新字符串。

如果将非字符串参数传递给 concat()，它将在拼接之前将这些参数转换为字符串。例如

let racing = 'Formula ' + 1;
console.log(racing);Code language: JavaScript (javascript)

输出

Formula 1

此示例将字符串拼接成一个新字符串

let result = concat('JavaScript', ' ', 'String',' ', 'Concatenation');
console.log(result);Code language: JavaScript (javascript)

输出

JavaScript String ConcatenationCode language: JavaScript (javascript)

以下示例将 数组 中的所有字符串元素拼接成一个字符串

let list = ['JavaScript',' ', 'String',' ', 'Concatenation'];
let result = ''.concat(...list);

console.log(result);Code language: JavaScript (javascript)

输出

JavaScript String ConcatenationCode language: JavaScript (javascript)

2) 使用 + 和 += 运算符

+ 运算符允许你拼接两个字符串。例如

let lang = 'JavaScript';
let result = lang + ' String';

console.log(result);Code language: JavaScript (javascript)

输出

JavaScript StringCode language: JavaScript (javascript)

要逐段组成一个字符串，可以使用 += 运算符

let className = 'navbar';
className += ' primary-color';
className += ' sticky-bar';

console.log(className);
Code language: JavaScript (javascript)

输出

根据对某些现代 Web 浏览器的性能测试，+ 和 += 运算符的执行速度比 concat() 方法更快。

3) 使用模板字面量

ES6 引入了 模板字面量，允许你执行字符串插值。

以下示例展示了如何拼接三个字符串

let navbarClass = 'navbar';
let primaryColor = 'primary-color';
let stickyClass = 'sticky-bar';

let className = `${navbarClass} ${primaryColor} ${stickyClass}`;

console.log(className);Code language: JavaScript (javascript)

输出

navbar primary-color stickyBarCode language: JavaScript (javascript)

在本教程中，你已经学习了如何使用 concat() 方法、+ 和 += 运算符以及模板字面量在 JavaScript 中拼接字符串。