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

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

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

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

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

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

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

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

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

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

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

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

// 性能不佳（在循环中）
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 + ".";

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