JavaScript 字符串拼接：+、模板字面量、join() 与性能技巧

By 佐川 直弘 | Naohiro Sagawa (運営者)

※記事内に広告を含みます。Amazonアソシエイトとして適格販売により収入を得ています。　

1. 介绍：什么是 JavaScript 中的字符串连接？

JavaScript 使字符串操作变得极其重要。在这些操作中，字符串连接是最基础且使用最频繁的技术之一。

例如，你经常需要将用户名与消息组合，或将多个数据片段合并为一个字符串。

在本文中，我们将逐步介绍 在 JavaScript 中连接字符串的实用方法。我们将涵盖从基础技术到实际案例，甚至性能优化，适用于从初学者到中级开发者。

1.1 为什么字符串操作在 JavaScript 中很重要

JavaScript 对于构建 动态 Web 应用 至关重要。字符串连接在以下情形中特别有用：

• 处理用户输入：组织表单中输入的数据。
• 生成 HTML：动态构建 HTML 并在页面上显示。
• 合并 API 数据：将从 API 获取的多个值合并后进行展示。

1.2 字符串连接的简单示例

下面是一个使用字符串连接的基本示例：

let firstName = "John";
let lastName = "Doe";
let fullName = firstName + " " + lastName;

console.log(fullName); // Output: John Doe

正如你所见，你可以使用 + 运算符轻松连接字符串。然而，JavaScript 还提供了其他便捷的字符串连接方式，根据具体情况选择合适的方法非常重要。

1.3 文章结构

在本文中，我们将详细讨论以下主题：

1. 基本字符串连接方法：如何使用加号运算符和模板字面量。
2. 高级技巧：连接数组以及将字符串与特殊类型混合。
3. 性能优化：处理大量数据时的最佳方案。

阅读完本文后，你将拥有 自信处理 JavaScript 字符串连接的技能。接下来，我们将深入探讨具体技术细节。

2. 在 JavaScript 中连接字符串的基本技术（附代码示例）

JavaScript 提供了多种字符串连接方式。本节将仔细审视最基础且最常用的技术。

2.1 使用加号运算符 (+) 进行简单连接

最简单的方法是使用 加号运算符 (+)。

示例

let greeting = "Hello";
let name = "Taro";
let message = greeting + ", " + name + "!";

console.log(message); // Output: Hello, Taro!

优点

• 适合初学者：语法直观，易于学习。
• 简洁：可以用简短的代码快速实现。

注意事项

1. 不同数据类型的行为：在与数字或 null 进行连接时，JavaScript 会进行隐式类型转换，可能导致意外结果。

示例：

let age = 25;
let message = "Age: " + age;

console.log(message); // Output: Age: 25

2. 不适合大规模处理：如果在循环中反复连接字符串，性能可能下降。我们将在后面讨论优化。

2.2 使用模板字面量（反引号）

模板字面量在 ES6（ECMAScript 2015）中引入。它们使用反引号（`），并允许在字符串中直接嵌入变量和表达式。

示例

let greeting = "Hello";
let name = "Taro";
let message = `${greeting}, ${name}!`;

console.log(message); // Output: Hello, Taro!

优点

• 更易读：可以直接在 ${} 中写入变量和表达式，提高代码可读性。
• 多行字符串：更方便创建包含换行的字符串。

  let address = `Tokyo
  Shinjuku
  1-1-1`;
  console.log(address);
  

2.3 在加号运算符和模板字面量之间的选择

2.4 实用示例：生成动态 HTML

使用加号运算符

let userName = "Taro";
let content = "<h1>Welcome, " + userName + "!</h1>";
document.body.innerHTML = content;

使用模板字面量

let userName = "Taro";
let content = `<h1>Welcome, ${userName}!</h1>`;
document.body.innerHTML = content;

2.5 小结

在本节中，我们介绍了以下用于在 JavaScript 中连接字符串的基本技术：

1. 加号运算符 对初学者友好且易于使用。
2. 模板字面量 提高了可读性，并且在实际场景中功能强大。

在下一节中，我们将更详细地了解用于连接数组元素的 join() 方法。

3. 将数组连接成字符串：join() 方法完整指南

在 JavaScript 中，当你想将数组元素连接成单个字符串时，join() 方法 非常有用。在本节中，我们将从基础到实际用例进行全面讲解。

3.1 join() 方法是什么？

join() 方法 使用指定的分隔符（delimiter）连接数组元素，并返回一个字符串。

基本语法

array.join([separator])

• array：要连接的数组。
• separator（可选）：在元素之间插入的分隔符。如果省略，默认使用逗号（,）。

返回值

返回连接后的字符串。

3.2 join() 的基本用法

示例 1：使用默认分隔符（逗号）

let fruits = ["Apple", "Banana", "Orange"];
let result = fruits.join();

console.log(result); // Output: Apple,Banana,Orange

在此示例中，使用逗号（,）作为分隔符。

示例 2：指定分隔符

let fruits = ["Apple", "Banana", "Orange"];
let result = fruits.join(" / ");

console.log(result); // Output: Apple / Banana / Orange

你可以自由选择任意分隔符。

3.3 使用空字符串或换行符作为分隔符

使用空字符串连接

let letters = ["H", "e", "l", "l", "o"];
let result = letters.join("");

console.log(result); // Output: Hello

这里，通过将 空字符串 (“”) 设为分隔符，数组被无缝连接。

使用换行符连接

let lines = ["Line 1", "Line 2", "Line 3"];
let result = lines.join("\n");

console.log(result);
/*
Output:
Line 1
Line 2
Line 3
*/

当你想插入换行并整齐地格式化输出时，这很有用。

3.4 将数组转换为字符串的实用示例

示例 1：动态生成 HTML 列表

let items = ["Apple", "Banana", "Orange"];
let list = "<ul><li>" + items.join("</li><li>") + "</li></ul>";

console.log(list);
// Output: <ul><li>Apple</li><li>Banana</li><li>Orange</li></ul>

这种方法使用 join() 可以轻松构建列表标记。

示例 2：创建 CSV 格式的数据

let data = [
  ["Name", "Age", "Gender"],
  ["Tanaka", "25", "Male"],
  ["Yamada", "30", "Female"]
];

let csv = data.map(row => row.join(",")).join("\n");

console.log(csv);
/*
Output:
Name,Age,Gender
Tanaka,25,Male
Yamada,30,Female
*/

通过两次使用 join()，可以轻松生成 CSV 数据。

3.5 使用 join() 时需要注意的事项

1. 处理空数组

   let emptyArray = [];
   console.log(emptyArray.join(",")); // Output: (empty string)
   

空数组会返回空字符串。这不会抛出错误，但要小心避免意外结果。

2. 类型转换

   let mixedArray = [1, true, null, undefined, "string"];
   console.log(mixedArray.join("-"));
   // Output: 1-true--undefined-string
   

join() 会自动将每个元素转换为字符串。特别需要注意的是，null 和 undefined 会被视为空字符串。

3. 性能考虑 即使连接大量数据，join() 通常被认为是高性能的。它通常比循环中的手动连接更高效。

3.6 总结

在本节中，我们介绍了使用 join() 方法 将数组转换为字符串的连接。

• 我们介绍了基本语法以及如何指定分隔符。
• 我们展示了实际示例，如HTML 生成和CSV 创建。
• 我们解释了重要的注意事项，如类型转换和处理空数组。

join() 方法简单却高度灵活。掌握它将帮助您更有效地操作字符串。

在下一节中，我们将深入探讨更高级的技术，如与特殊类型（数字、null 等）的连接以及错误处理。

4. 实用指南：高级字符串连接技术（大量示例代码）

在本节中，我们将深入探讨 JavaScript 中字符串连接的高级技术——特别是与数字或 null 的连接以及错误处理。

4.1 与数字和布尔值的连接

在 JavaScript 中，当您将字符串与其他数据类型（数字、布尔值等）连接时，会自动发生隐式类型转换。以下是如何安全使用这种行为。

示例 1：与数字连接

let name = "Taro";
let age = 25;

let message = name + " is " + age + " years old.";
console.log(message); // Output: Taro is 25 years old.

由于数字自动转换为字符串，连接按预期工作。

注意事项 1：混合算术和字符串连接

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

let result2 = "Price: " + 10 + 5 + " yen";
console.log(result2); // Output: Price: 105 yen

解释：

• 在第一个示例中，数字先相加，然后结果转换为字符串。
• 在第二个示例中，首先与初始字符串连接，因此剩余的数字被视为字符串。

解决方案

使用括号明确控制求值顺序。

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

4.2 与 null 或 undefined 连接时的错误处理

如果您的数据包含 null 或 undefined，连接可能会产生意外输出。

问题示例

let name = null;
let greeting = "Hello, " + name + "!";

console.log(greeting); // Output: Hello, null!

这里，null 被转换为字符串 "null"。

解决方案 1：使用默认值

let name = null || "Guest";
let greeting = "Hello, " + name + "!";

console.log(greeting); // Output: Hello, Guest!

如果值为 null 或 undefined，使用默认值（这里是 “Guest”）可以防止意外结果。

解决方案 2：使用模板字面量的条件处理

let name = undefined;
let greeting = `Hello, ${name ?? "Guest"}!`;

console.log(greeting); // Output: Hello, Guest!

这使用了空值合并运算符 (??) 在值为 null 或 undefined 时分配默认值。

4.3 复杂字符串构建的高级示例

示例 1：动态连接对象中的信息

let user = {
  firstName: "Taro",
  lastName: "Yamada",
  age: 30
};

let message = `${user.firstName} ${user.lastName} is ${user.age} years old.`;
console.log(message);
// Output: Taro Yamada is 30 years old.

模板字面量使输出对象属性变得干净容易。

示例 2：创建条件字符串

let isAdmin = true;
let userName = "Taro";

let message = `${userName}${isAdmin ? " (Admin)" : ""}, welcome!`;
console.log(message);
// Output: Taro (Admin), welcome!

解释：这使用了三元运算符 (? :) 根据条件追加文本。

4.4 实用技巧：构建路径和 URL

示例 1：动态生成 URL

let baseUrl = "https://example.com/user";
let userId = 123;
let query = "active=true";

let fullUrl = `${baseUrl}/${userId}?${query}`;
console.log(fullUrl);
// Output: https://example.com/user/123?active=true

示例 2：路径规范化

let folder = "images";
let file = "logo.png";

let path = [folder, file].join("/");
console.log(path); // Output: images/logo.png

使用 join() 合并数组可以让路径构建既简单又一致。

4.5 小结

在本节中，我们介绍了 JavaScript 字符串拼接的高级技巧。

• 我们解释了在与数字、null 和 undefined 拼接时的注意事项和安全做法。
• 我们提供了实用示例，如条件字符串以及从对象动态生成输出。
• 我们展示了真实场景的用例，例如构建 URL 和文件路径。

通过运用这些技巧，即使是复杂的字符串操作也能写出简洁的代码。

在下一节中，我们将探讨 字符串拼接的性能与优化技巧。你将学习在处理大数据集时如何加速处理过程。

5. 性能与优化技巧：如何加速字符串拼接

在 JavaScript 中进行字符串拼接时，处理速度和性能可能变得至关重要——尤其是在处理 大数据集 或 循环内部的重复操作 时。

本节将解释面向性能的字符串拼接优化技术。

5.1 字符串拼接的性能挑战

随着数据量的增加，字符串拼接往往会 变慢。这是因为 JavaScript 的字符串是 不可变 的。

• 每创建一次新字符串，都会在内存中分配一个新对象。
• 在循环中反复拼接会导致频繁的对象创建与销毁，从而降低性能。

考虑下面的示例：

let result = "";
for (let i = 0; i < 100000; i++) {
  result += "a";
}
console.log(result.length); // Output: 100000

虽然这段代码可以工作，但由于每次迭代都会创建新的字符串对象，可能会 运行缓慢。

5.2 高效拼接方法对比

1. 加号运算符 (+)

let str = "";
for (let i = 0; i < 100000; i++) {
  str += "a";
}

• 优点：简单直观。
• 缺点：在大规模处理时性能会下降。

2. 使用 join() 方法的数组

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

• 优点：数组是 可变 的，添加元素高效且快速。
• 缺点：代码稍微复杂一些。

3. 模板字面量（反引号）

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

• 优点：可读性高，语法简洁。
• 缺点：性能与 + 运算符相近，且不适合大循环使用。

5.3 性能测试结果

下表展示了每种方法的典型基准结果。

结果：对于大规模拼接，使用 join() 的数组显著更快。

5.4 大数据处理的最佳实践

1. 小数据集 → 为了简洁，使用 + 运算符 或 模板字面量。
2. 大数据集（1000 次以上的拼接） → 使用 带 join() 的数组 以获得更好性能。
3. 动态数据生成（HTML 或 JSON） → 使用 模板字面量 在可读性和效率之间取得平衡。

5.5 其他优化技巧

1. 预编译与缓存

• 将经常使用的字符串存入变量或常量中并重复使用。

2. 批量处理

• 将数据分块处理，而不是一次性全部拼接，以降低负载。

3. 使用第三方库

• 高性能实用库（例如 Lodash）可以提供优化的字符串处理。

5.6 小结

在本节中，我们探讨了字符串连接的性能挑战和优化技术。

• 对于小规模操作，+ 运算符和模板字面量非常方便。
• 对于大规模处理，使用 join() 的数组能够显著提升性能。
• 深思熟虑的代码设计和有选择地使用库可以进一步提升效率。

在下一节中，我们将回答关于 JavaScript 字符串连接的常见问题（FAQ）。

6. 常见问题（FAQ）：解决常见的 JavaScript 字符串连接问题

在本节中，我们以问答形式阐述关于 JavaScript 字符串连接的常见问题和实际关注点。

Q1：我应该使用 + 运算符还是 join() 方法？

A1：根据操作类型和数据规模进行选择。

• + 运算符 由于其可读性和易用性，最适合小规模和简单的连接。

  let firstName = "Taro";
  let lastName = "Yamada";
  let fullName = firstName + " " + lastName;
  console.log(fullName); // Output: Taro Yamada
  

• join() 方法 适用于连接数组元素或处理对性能有要求的大数据集。

  let words = ["Hello", "World"];
  let sentence = words.join(" ");
  console.log(sentence); // Output: Hello World
  

关键点：

小字符串 → 使用 +

大列表或数据集 → 使用 join()

Q2：何时使用模板字面量？

A2：在构建复杂或动态字符串时。

模板字面量使用反引号（`），并支持轻松的变量插值。

let name = "Taro";
let age = 25;
let message = `${name} is ${age} years old.`;
console.log(message);

推荐使用场景：

• HTML 生成：构建动态标记。
• 多行字符串：处理包含换行的文本。
• 变量插值：提升可读性。

Q3：在不进行转换的情况下连接数字会导致错误吗？

A3：不会产生错误，但隐式类型转换需要谨慎。

JavaScript 在连接时会自动将数字转换为字符串。

let age = 30;
let message = "Age: " + age;
console.log(message); // Output: Age: 30

然而，将算术运算与连接混合使用可能导致意外结果。

let result = "Total: " + 10 + 20;
console.log(result); // Output: Total: 1020

解决方案：

let result = "Total: " + (10 + 20);
console.log(result); // Output: Total: 30

Q4：与 null 或 undefined 进行连接时会怎样？

A4：它们会被转为字符串，这可能产生非预期的输出。

let value = null;
let message = "Value: " + value;
console.log(message); // Output: Value: null

解决方案：

let value = null || "Not set";
let message = `Value: ${value}`;
console.log(message); // Output: Value: Not set

Q5：哪种方法在性能上最佳？

A5：对于大数据集，使用 join() 的数组是最佳选择。

6.6 小结

在本 FAQ 部分，我们回答了关于 JavaScript 字符串连接的常见问题。

• 根据数据规模在 + 与 join() 之间进行选择。
• 使用 模板字面量 来实现可读且动态的字符串构建。
• 始终谨慎处理 类型转换和空值。

遵循这些指南，你可以编写 安全、高效且实用的代码。

在下一节中，我们将通过总结如何在不同场景下选择 最佳字符串连接方法 来结束本文。

7. 结论：选择最佳的字符串连接方法

在本文中，我们从基础到高级技术以及性能优化，探讨了 JavaScript 字符串拼接。在本节的最后，我们将回顾关键要点，并再次确认 每种场景下最佳的拼接方法。

7.1 每种方法的特性和使用场景

7.2 按场景推荐的方法

1. 简单字符串拼接（例如姓名或短消息） → 使用 + 运算符 或 模板字面量。
2. 多行字符串或 HTML 生成（例如表格或列表） → 使用 模板字面量 以获得更好的可读性。
3. 数据集拼接或 CSV 生成 → 使用 join() 方法 以获得速度和效率。
4. 在循环中进行大规模拼接（例如日志或报告） → 将 数组与 join() 结合使用以优化性能。

7.3 常见陷阱及规避方法

1. 处理 null 和 undefined

• 在拼接前分配 默认值 或使用 空值合并运算符 (??)。

2. 将算术运算与字符串拼接混用

• 将数值计算用括号括起来，以确保正确的求值顺序。

3. 性能下降

• 对小数据使用 + 运算符，对大规模处理使用 join()。

7.4 后续学习步骤

在本篇文章的基础上，您可以进一步探索以下主题，以进一步提升 JavaScript 技能：

• 正则表达式和字符串操作：对搜索和替换操作很有用。
• 高级错误处理：编写更安全、更健壮的代码。
• 现代 ES6+ 特性：将字符串处理与 map()、展开运算符等方法结合。
• 第三方库：利用 Lodash 等实用工具实现高效的数据处理。

7.5 关键要点

1. 了解基础

• 对简单拼接使用加号运算符或模板字面量。

2. 运用高级技术

• 使用数组和 join() 高效处理大数据集。

3. 优化性能

• 根据数据规模和处理需求选择合适的方法。

4. 练习错误处理

• 安全处理 null、undefined 以及类型转换问题。

7.6 付诸实践

阅读本文后，您应该已经对 基本和高级的 JavaScript 字符串拼接技术 有了扎实的理解。

在实际项目中应用这些概念，尝试不同的方法，并提升您 为每种情况选择最高效、最易读的解决方案 的能力。

下一步，您可以考虑处理更复杂的数据或 API 集成，同时继续优化代码的可读性和性能。