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

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

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

1.加號(hào)運(yùn)算符（+）

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

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

// 混合類(lèi)型拼接（自動(dòng)類(lèi)型轉(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.加號(hào)賦值運(yùn)算符（+=）

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

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

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

使用反引號(hào)（）包裹字符串，使用 ${}` 插入表達(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() 方法

字符串對(duì)象的原生方法。

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

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

// 可以連接多個(gè)字符串
let fullName = "John".concat(" ", "Doe"); // "John Doe"

5.Array.join() 方法

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

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

// 無(wú)分隔符
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.";

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

性能比較

對(duì)于少量拼接：所有方法性能差異不大
對(duì)于大量循環(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("");

最佳實(shí)踐建議

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

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

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

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

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

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

實(shí)際應(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)險(xiǎn)）
const createQuery = (table, filters) => {
  const whereClause = Object.keys(filters)
    .map(key => `${key} = ${escapeSql(filters[key])}`)
    .join(" AND ");
  return `SELECT * FROM ${table} WHERE ${whereClause}`;
};

總結(jié)

簡(jiǎn)單拼接：使用 + 或 +=
現(xiàn)代開(kāi)發(fā)：優(yōu)先使用模板字符串（可讀性高，功能強(qiáng)大）
大量拼接：使用數(shù)組 join() 方法
方法鏈：使用 concat() 方法
數(shù)組轉(zhuǎn)字符串：使用 join() 并指定分隔符

模板字符串是 ES6 引入的最重要的改進(jìn)之一，它不僅使代碼更簡(jiǎn)潔，還支持多行字符串和表達(dá)式插入，是現(xiàn)代 JavaScript 開(kāi)發(fā)中的首選方法。

到此這篇關(guān)于JavaScript實(shí)現(xiàn)字符串拼接的常見(jiàn)方法的文章就介紹到這了,更多相關(guān)JavaScript字符串拼接方法內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: