JavaScript 字符串拼接指南：+、concat()、模板字面量和 join()

1 1. 介绍
2 2. 字符串拼接的基本方法
3 3. 其他字符串拼接方法
4 4. 连接数组元素
5 5. 性能与优化
6 6. 关键考虑因素和最佳实践
7 7. 总结

1. 介绍

JavaScript 是网页开发中使用最广泛的编程语言之一。在众多特性中，字符串拼接 是一种极其常用的基础操作——例如合并数据或生成要在屏幕上显示的内容。

举例来说，当你展示来自表单的数据或动态生成句子时，字符串拼接就显得必不可少。本文将详细说明在 JavaScript 中进行字符串拼接的多种不同方式，并根据你的使用场景提供相应的示例。

阅读完本文后，你将从基础到进阶技术全部掌握，并获得可在实际开发中应用的实用技能。

2. 字符串拼接的基本方法

在 JavaScript 中，拼接字符串最简单的方式是使用 加号运算符（+）。这种方法可读性高、写法简洁，即使是初学者也能快速上手。

使用加号运算符 (+) 的示例

let greeting = "Hello";
let name = "World";
let message = greeting + " " + name + "!";
console.log(message); // Output: Hello World!

此示例展示了如何轻松地拼接字符串字面量和变量。

注意类型转换

使用加号运算符时需要留意的一点是数字与字符串的拼接。在 JavaScript 中，不同类型相结合时，值会自动转换为字符串。

let number = 10;
let text = " apples";
console.log(number + text); // Output: 10 apples

这种行为虽然方便，但也可能产生意想不到的结果。如果希望先进行算术运算，需要使用括号来控制求值顺序。

console.log("The total is " + (5 + 10)); // Output: The total is 15
console.log("The total is " + 5 + 10);   // Output: The total is 510

小结

加号运算符简单直观，是短字符串拼接的理想选择。但在处理数字时要小心，并在必要时使用括号以避免意外结果。

3. 其他字符串拼接方法

在 JavaScript 中，除了加号运算符（+）之外，还有多种拼接字符串的方式。本节将介绍 concat() 方法和模板字面量，并说明它们的关键特性。

concat() 方法

concat() 方法是一个内置函数，用于合并多个字符串。由于采用基于函数的语法，当需要链式执行多次拼接操作时，它会显得比较方便。

示例

let str1 = "JavaScript";
let str2 = "string";
let str3 = "concatenation";
let result = str1.concat(" ", str2, " ", str3);
console.log(result); // Output: JavaScript string concatenation

在这段代码中，多个字符串被拼接，并在它们之间插入空格。

优势

可读性好，适用于按顺序拼接多个字符串的场景。
安全，因为它返回一个新字符串，不会修改原始字符串。

劣势

虽然可读，但会增加代码量，且不如使用加号运算符那样简洁。

模板字面量

模板字面量是 ES6（ECMAScript 2015）引入的较新语法。它们允许在字符串中嵌入变量，并更清晰地编写多行字符串。字符串使用反引号（`）包裹，可通过 ${} 嵌入变量或表达式。

示例

let name = "Taro";
let age = 25;
let message = `Hello, ${name}! You are ${age} years old.`;
console.log(message);
// Output: Hello, Taro! You are 25 years old.

优势

在嵌入变量或表达式时简洁易读。
使编写多行字符串变得轻而易举。

let address = `Address:
Tokyo
Shibuya
1-1-1`;
console.log(address);
/* Output:
Address:
Tokyo
Shibuya
1-1-1
*/

缺点

可能在旧版浏览器中不受支持，因此在旧环境中可能需要转译。

结论

根据您的使用场景和代码的可读性，选择合适的方法非常重要。

加号运算符 (+)：适用于简单情况。
concat() 方法：在需要安全地连接多个字符串时很有用。
模板字面量：适合嵌入变量/表达式以及处理多行字符串。

4. 连接数组元素

在 JavaScript 中，提供了 join() 方法 来高效地合并数组元素。该方法将每个元素连接成一个字符串，并允许您指定任意分隔符。

join() 方法的基本用法

语法

array.join(separator)

array：包含您想要连接的元素的数组。
separator：元素之间使用的分隔符（如果省略，默认是逗号 ,）。

示例

let words = ["JavaScript", "string", "concatenation"];
let result = words.join(" ");
console.log(result); // Output: JavaScript string concatenation

在此示例中，每个元素使用空格连接成一个字符串。

指定分隔符

逗号分隔（默认）

let fruits = ["apple", "orange", "grape"];
console.log(fruits.join()); // Output: apple,orange,grape

连字符分隔

let phoneNumber = ["080", "1234", "5678"];
console.log(phoneNumber.join("-")); // Output: 080-1234-5678

无分隔符

let letters = ["H", "e", "l", "l", "o"];
console.log(letters.join("")); // Output: Hello

实用示例

生成 HTML 标签

let listItems = ["<li>apple</li>", "<li>orange</li>", "<li>grape</li>"];
let htmlList = "<ul>" + listItems.join("") + "</ul>";
console.log(htmlList);
/*
Output:
<ul><li>apple</li><li>orange</li><li>grape</li></ul>
*/

生成 CSV 格式的字符串

let data = ["Tanaka", "Taro", "30", "Tokyo"];
console.log(data.join(",")); // Output: Tanaka,Taro,30,Tokyo

处理 JSON 数据时的输出格式化

let keys = ["name", "age", "location"];
let values = ["Suzuki", 28, "Osaka"];
let result = keys.map((key, index) => `${key}: ${values[index]}`).join(", ");
console.log(result);
// Output: name: Suzuki, age: 28, location: Osaka

join() 方法的优势

简单高效：您可以一次性连接多个元素，而无需编写循环。
灵活的分隔符：可以轻松根据数据结构自定义格式。
性能优化：即使处理大量字符串连接也能快速运行。

结论

在连接数组元素时，join() 方法 是一个强大的工具——尤其适用于以下情况：

创建列表式或表格式输出
格式化 CSV 或类似 JSON 的数据
生成 HTML 或结构化文本

5. 性能与优化

在 JavaScript 中连接字符串时，性能在处理大量数据或复杂处理时成为重要因素。本节将解释高效的字符串连接技术和关键的优化技巧。

大规模数据处理的性能问题

最直观的字符串连接方式是使用加号运算符（+），但在大循环中使用时性能可能下降。

示例：在循环中连接字符串

let result = "";
for (let i = 0; i < 100000; i++) {
  result += "data";
}

在此代码中，result 在每次迭代时都会重新创建为一个新的字符串对象，这会显著减慢处理速度。

高效的连接方法

使用数组结合 join() 方法

通过将数据存储在数组中并在最后使用 join() 方法，可以减少内存开销。

示例：高效循环处理

let data = [];
for (let i = 0; i < 100000; i++) {
  data.push("data");
}
let result = data.join("");

在这种方法中，每个字符串都存储在数组中，然后一次性进行拼接，这可以提升内存效率和性能。

使用模板字面量简化

模板字面量在可读性和便利性之间提供了良好的平衡，适用于小规模的字符串操作。

示例：使用模板字面量的循环

let result = "";
for (let i = 0; i < 100000; i++) {
  result = `${result}data`;
}

此方法使用方便，但相较于使用 join() 可能略慢一些，因此在处理大数据集时应谨慎使用。

基准比较

下表展示了在进行大规模字符串拼接时执行时间的差异。

Method	Execution Time (100,000 iterations)
Plus operator (`+`)	120ms
Array + `join()`	25ms
Template literals (`${}`)	135ms

这些结果表明 将数组与 join() 结合 是最有效的做法。

关键要点和最佳实践

对短字符串保持简洁 对于小规模的拼接，使用加号运算符或模板字面量完全足够。
在大规模数据处理时使用 join() 对于大型数据集，推荐使用基于数组的拼接，以获得更好的性能和内存效率。
使用优化工具 当性能至关重要时，使用 Chrome DevTools 或 Node.js 性能测量工具等来评估执行时间和内存使用情况。

结论

字符串拼接应根据代码的规模和用途进行优化。

小规模处理：使用加号运算符或模板字面量。
大规模处理：使用数组并结合 join() 方法进行高效拼接。

通过为每种场景选择合适的方法，您可以兼顾速度和可读性。

6. 关键考虑因素和最佳实践

在 JavaScript 中进行字符串拼接时，可能会出现意外错误或性能问题。本节将介绍需要注意的重要点以及编写高效、可维护代码的最佳实践。

数字与字符串拼接时的类型转换

在 JavaScript 中，当你将数字与字符串拼接时，数字会自动转换为字符串。此行为虽有用，但有时会产生意外的结果。

示例：意外结果

let total = 5 + 10 + " yen";
console.log(total); // Output: "15 yen"

这里，5 + 10 先被求值，得到 15。随后它与字符串拼接，15 被转换为字符串。

解决方案
如果想控制求值顺序，请使用括号。

let total = 5 + (10 + " yen");
console.log(total); // Output: "510 yen"

处理 undefined 或 null 值

如果变量为 undefined 或 null，直接拼接可能会产生意外的输出。

示例：处理 null 或 undefined

let name = null;
let greeting = "Hello, " + name + "!";
console.log(greeting); // Output: "Hello, null!"

解决方案
可以通过提供默认值来安全处理。

let name = null;
let greeting = `Hello, ${name || "Guest"}!`;
console.log(greeting); // Output: "Hello, Guest!"

优化大规模字符串拼接

处理大量文本时，推荐使用 join() 方法以提升性能。

高效示例

let data = [];
for (let i = 0; i < 100000; i++) {
  data.push("data");
}
let result = data.join("");

在循环中使用 += 可能会降低速度，因此将值存入数组并在最后使用 join() 通常更快。

提高可读性和可维护性

由于代码可能由原作者之外的人维护，请牢记以下要点：

使用模板字面量 当连接字符串与变量或换行时，模板字面量有助于保持代码的整洁性和可读性。

示例：使用模板字面量提升可读性

let name = "Tanaka";
let age = 30;
let message = `${name} is ${age} years old.`;
console.log(message); // Output: Tanaka is 30 years old.

必要时添加注释 对于更复杂的逻辑，添加适当的注释以澄清您的意图并提高可维护性。

最佳实践总结

对于小型连接，使用加号运算符或模板字面量。
对于大型连接，使用数组和 join() 以获得更好的性能。
注意类型转换和未定义/空值，并设置安全的默认值。
通过使用模板字面量并在适当时候添加注释，优先考虑可读性和可维护性。

7. 总结

在本文中，我们探讨了在 JavaScript 中执行字符串连接的各种方法——从基本技术到更高级的方法。让我们回顾关键点，以便您在实际开发中应用它们。

1. 基本字符串连接方法

加号运算符 (+) 简单直观，非常适合小型连接。
注意类型转换，并使用括号防止意外结果。

2. 其他字符串连接方法

concat() 方法 是一种基于函数的方法，可以安全地连接多个字符串。
模板字面量 允许您嵌入变量和表达式，它们还支持多行字符串。这使得它们既灵活又高度可读。

3. 连接数组元素

使用 join() 方法 ，您可以高效地将数组元素转换为单个字符串。
因为分隔符可以自定义，它特别适用于生成列表或 CSV 格式的字符串。

4. 性能和优化

对于小型操作，使用加号运算符或模板字面量通常是可以的。
对于大规模字符串连接，使用 join() 方法 可以显著提高性能。
在处理大量数据时，避免在循环中重复字符串操作，而是使用数组以提高效率。

5. 关键注意事项和最佳实践

在处理数字或未定义值时，注意类型转换并使用安全的默认值以避免错误。
使用模板字面量和注释来提高可读性和可维护性。
根据您的具体场景选择最佳方法，并在需要时使用优化工具测量性能。

您的下一步

现在您已经学习了 JavaScript 字符串连接的基础知识、高级技术以及重要的注意事项，请尝试以下练习来实践。

练习任务

创建一个程序，使用数组数据动态生成 HTML 列表（ <ul><li> ）。
构建一个程序，接受用户的姓名和年龄作为输入，然后使用模板字面量生成自我介绍消息。
运行 100,000 次迭代测试，并比较加号运算符和 join() 方法的性能。

最终想法

字符串连接是日常 JavaScript 编程中的基本操作。使用本文中的技术来改善您的开发工作流程和学习过程。

继续探索更高级的字符串处理和性能调优，以进一步提升您的 JavaScript 技能！

Prev

2026-01-19
JavaScript 字符串拼接：5 种最佳方法（+ 性能技巧 & 常见错误）
Next
記事がありません