首页 > 网络编程 > JavaScript > javascript技巧 > JavaScript字符串拼接方法

JavaScript实现字符串拼接的常见方法

2026-02-02 08:48:18 作者：Yashar Qian

字符串拼接是 JavaScript 编程中常见的操作,在开发过程中,拼接字符串的方式多种多样,每种方法的性能和可读性都有不同的特点,本文将结合实际项目代码示例,深入探讨几种常见的字符串拼接方式,需要的朋友可以参考下

在 JavaScript 中，字符串拼接是将多个字符串连接成一个新字符串的操作。以下是几种常见的字符串拼接方法：

1.加号运算符（+）

最基本的字符串拼接方式。

let str1 = "Hello";
let str2 = "World";
let result = str1 + " " + str2; // "Hello World"

// 混合类型拼接（自动类型转换）
let name = "Alice";
let age = 25;
let message = "My name is " + name + " and I'm " + age + " years old.";
// "My name is Alice and I'm 25 years old."

2.加号赋值运算符（+=）

用于在现有字符串后追加内容。

let str = "Hello";
str += " ";
str += "World";
console.log(str); // "Hello World"

3.模板字符串（Template Literals）（ES6+）

使用反引号（）包裹字符串，使用 ${}` 插入表达式。

let name = "Bob";
let age = 30;
let message = `My name is ${name} and I'm ${age} years old.`;

// 支持多行字符串
let multiLine = `
  This is a
  multi-line
  string.
`;

// 支持表达式
let a = 5;
let b = 10;
let sum = `The sum of ${a} and ${b} is ${a + b}.`;
// "The sum of 5 and 10 is 15."

4.concat() 方法

字符串对象的原生方法。

let str1 = "Hello";
let str2 = " ";
let str3 = "World";

let result = str1.concat(str2, str3); // "Hello World"

// 可以连接多个字符串
let fullName = "John".concat(" ", "Doe"); // "John Doe"

5.Array.join() 方法

将数组元素连接成字符串，可指定分隔符。

let words = ["Hello", "World", "!"];
let sentence = words.join(" "); // "Hello World !"

// 无分隔符
let noSpace = words.join(""); // "HelloWorld!"

// 使用其他分隔符
let csv = ["apple", "banana", "orange"].join(", "); // "apple, banana, orange"

6.String interpolation with variables

在特定上下文中使用变量插入。

// 传统方式
let user = { name: "Alice", score: 95 };
let info = user.name + " scored " + user.score + " points.";

// 模板字符串方式（更简洁）
let info2 = `${user.name} scored ${user.score} points.`;

性能比较

对于少量拼接：所有方法性能差异不大
对于大量循环拼接：
- 使用数组的 join() 方法通常最快
- 避免在循环中使用 +=（每次创建新字符串）
- 模板字符串性能良好且可读性高

// 性能不佳（在循环中）
let result = "";
for (let i = 0; i < 1000; i++) {
  result += "text" + i; // 每次创建新字符串
}

// 性能较好
let parts = [];
for (let i = 0; i < 1000; i++) {
  parts.push("text" + i);
}
let result2 = parts.join("");

最佳实践建议

现代开发优先使用模板字符串：

// 推荐
const greeting = `Hello, ${username}! Welcome to ${appName}.`;

// 不推荐
const greeting = "Hello, " + username + "! Welcome to " + appName + ".";

处理大量拼接时使用数组 join()：

const chunks = [];
chunks.push("<div>");
chunks.push(`<span class="title">${title}</span>`);
chunks.push(`<p>${content}</p>`);
chunks.push("</div>");
const html = chunks.join("");

避免隐式类型转换的陷阱：

console.log("5" + 3); // "53" (字符串)
console.log(5 + "3"); // "53" (字符串)
console.log(5 + 3 + "2"); // "82" (先计算5+3=8，然后"8"+"2")
console.log("5" + 3 + 2); // "532" (从左到右，"5"+"3"="53"，"53"+"2"="532")

实际应用示例

// URL 构建
const buildUrl = (base, params) => {
  const queryString = Object.keys(params)
    .map(key => `${encodeURIComponent(key)}=${encodeURIComponent(params[key])}`)
    .join("&");
  return `${base}?${queryString}`;
};

// HTML 生成
const createUserCard = (user) => `
  <div class="user-card">
    <h3>${escapeHtml(user.name)}</h3>
    <p>Email: ${escapeHtml(user.email)}</p>
    <p>Joined: ${formatDate(user.joinDate)}</p>
  </div>
`;

// SQL 查询构建（注意SQL注入风险）
const createQuery = (table, filters) => {
  const whereClause = Object.keys(filters)
    .map(key => `${key} = ${escapeSql(filters[key])}`)
    .join(" AND ");
  return `SELECT * FROM ${table} WHERE ${whereClause}`;
};

总结

简单拼接：使用 + 或 +=
现代开发：优先使用模板字符串（可读性高，功能强大）
大量拼接：使用数组 join() 方法
方法链：使用 concat() 方法
数组转字符串：使用 join() 并指定分隔符

模板字符串是 ES6 引入的最重要的改进之一，它不仅使代码更简洁，还支持多行字符串和表达式插入，是现代 JavaScript 开发中的首选方法。

到此这篇关于JavaScript实现字符串拼接的常见方法的文章就介绍到这了,更多相关JavaScript字符串拼接方法内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！