JavaScript 字符串拼接方法

在 JavaScript 中，有多种字符串拼接的方式，我来详细介绍每种方法：

1. 加号运算符 (+)

最基本的字符串拼接方式

// 基本用法
let str1 = "Hello";
let str2 = "World";
let result = str1 + " " + str2;
console.log(result); // "Hello World"

// 数字和字符串拼接
let age = 25;
let message = "I am " + age + " years old";
console.log(message); // "I am 25 years old"

// 复合赋值
let text = "Hello";
text += " World";
text += "!";
console.log(text); // "Hello World!"

2. 模板字符串 (Template Literals)

ES6 引入，使用反引号 ` 和 ${}

let name = "Alice";
let age = 30;
let city = "New York";

// 基本用法
let greeting = `Hello, my name is ${name}`;
console.log(greeting); // "Hello, my name is Alice"

// 多行字符串
let multiLine = `
  Name: ${name}
  Age: ${age}
  City: ${city}
`;
console.log(multiLine);

// 表达式计算
let price = 19.99;
let tax = 0.1;
let message = `Total: $${(price * (1 + tax)).toFixed(2)}`;
console.log(message); // "Total: $21.99"

// 函数调用
function getFullName(first, last) {
  return `${first} ${last}`;
}
let fullName = `Dr. ${getFullName("John", "Doe")}`;
console.log(fullName); // "Dr. John Doe"

3. concat() 方法

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

// 基本用法
let result = str1.concat(" ", str2);
console.log(result); // "Hello World"

// 多个参数
let result2 = str1.concat(" ", str2, str3);
console.log(result2); // "Hello World!"

// 注意：concat 不会修改原字符串
console.log(str1); // "Hello"

4. 数组 join() 方法

适合拼接大量字符串

let words = ["Hello", "World", "from", "JavaScript"];

// 基本用法
let sentence = words.join(" ");
console.log(sentence); // "Hello World from JavaScript"

// 不同分隔符
let csv = words.join(",");
console.log(csv); // "Hello,World,from,JavaScript"

let path = words.join("/");
console.log(path); // "Hello/World/from/JavaScript"

// 性能最好，适合大量字符串拼接
let items = [];
for (let i = 0; i < 1000; i++) {
  items.push(`item${i}`);
}
let result = items.join(",");

5. 性能对比示例

// 测试不同方法的性能
console.time("Plus operator");
let str1 = "";
for (let i = 0; i < 10000; i++) {
  str1 += "a";
}
console.timeEnd("Plus operator");

console.time("Array join");
let arr = [];
for (let i = 0; i < 10000; i++) {
  arr.push("a");
}
let str2 = arr.join("");
console.timeEnd("Array join");

console.time("Template literal");
let str3 = "";
for (let i = 0; i < 10000; i++) {
  str3 = `${str3}a`;
}
console.timeEnd("Template literal");

6. 实用示例

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

let url = buildUrl("https://api.example.com", {
  page: 1,
  limit: 10,
  search: "javascript"
});
console.log(url);
// "https://api.example.com?page=1&limit=10&search=javascript"

// 生成 HTML
function createCard(title, content, tags) {
  return `
    <div class="card">
      <h2>${title}</h2>
      <p>${content}</p>
      <div class="tags">
        ${tags.map(tag => `<span class="tag">${tag}</span>`).join('')}
      </div>
    </div>
  `;
}

// 格式化输出
function formatLog(level, message, data) {
  const timestamp = new Date().toISOString();
  return `[${timestamp}] ${level}: ${message} ${data ? JSON.stringify(data) : ''}`;
}

7. 注意事项

// 1. 类型转换问题
console.log("5" + 3);     // "53" (字符串拼接)
console.log(5 + "3");     // "53" (字符串拼接)
console.log(5 + 3 + "2"); // "82" (先计算5+3=8，然后拼接"2")

// 2. null 和 undefined
console.log("Hello " + null);      // "Hello null"
console.log("Hello " + undefined); // "Hello undefined"

// 3. 大循环中的性能
// 不好的做法
let bad = "";
for (let i = 0; i < 1000; i++) {
  bad += "text"; // 每次创建新字符串
}

// 好的做法
let good = [];
for (let i = 0; i < 1000; i++) {
  good.push("text");
}
let result = good.join("");

8. 推荐使用场景

最佳实践：

• 少量简单拼接：使用 + 或模板字符串
• 复杂字符串：使用模板字符串
• 大量字符串拼接：使用数组 join()
• 构建 HTML：使用模板字符串（注意 XSS 防护）