快捷導(dǎo)航

JavaScript實現(xiàn)字符串拼接的常見方法

更新時間：2026年02月02日 08:48:18 作者：Yashar Qian

字符串拼接是 JavaScript 編程中常見的操作,在開發(fā)過程中,拼接字符串的方式多種多樣,每種方法的性能和可讀性都有不同的特點,本文將結(jié)合實際項目代碼示例,深入探討幾種常見的字符串拼接方式,需要的朋友可以參考下

1.加號運算符（+）

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

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

// 混合類型拼接（自動類型轉(zhuǎn)換）
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.加號賦值運算符（+=）

用于在現(xiàn)有字符串后追加內(nèi)容。

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

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

使用反引號（）包裹字符串，使用 ${}` 插入表達(dá)式。

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.
`;

// 支持表達(dá)式
let a = 5;
let b = 10;
let sum = `The sum of ${a} and $ 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() 方法

將數(shù)組元素連接成字符串，可指定分隔符。

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

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

// 傳統(tǒng)方式
let user = { name: "Alice", score: 95 };
let info = user.name + " scored " + user.score + " points.";

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

性能比較

對于少量拼接：所有方法性能差異不大
對于大量循環(huán)拼接：
- 使用數(shù)組的 join() 方法通常最快
- 避免在循環(huán)中使用 +=（每次創(chuàng)建新字符串）
- 模板字符串性能良好且可讀性高

// 性能不佳（在循環(huán)中）
let result = "";
for (let i = 0; i < 1000; i++) {
  result += "text" + i; // 每次創(chuàng)建新字符串
}

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

最佳實踐建議

現(xiàn)代開發(fā)優(yōu)先使用模板字符串：

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

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

處理大量拼接時使用數(shù)組 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("");

避免隱式類型轉(zhuǎn)換的陷阱：

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")

實際應(yīng)用示例

// URL 構(gòu)建
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 查詢構(gòu)建（注意SQL注入風(fēng)險）
const createQuery = (table, filters) => {
  const whereClause = Object.keys(filters)
    .map(key => `${key} = ${escapeSql(filters[key])}`)
    .join(" AND ");
  return `SELECT * FROM ${table} WHERE ${whereClause}`;
};