JavaScript 字串拼接錯誤：+= 左側必須為變數，正確寫法與模板字面值

錯誤代碼（推測）

// 錯誤：直接對字面值使用 +=
"<div>" += "內容";  // Uncaught ReferenceError: Invalid left-hand side in assignment

錯誤原因

+= 是**複合指派運算子**，左側**必須是可寫入的變數/屬性**，不能是字面值或表達式結果。

正確寫法一：宣告變數累加

let html = "";
html += "<div>";
html += "內容";
html += "</div>";
console.log(html);

正確寫法二：陣列 join（效能較佳）

const parts = [];
parts.push("<div>");
parts.push("內容");
parts.push("</div>");
const html = parts.join("");
console.log(html);

正確寫法三：ES6 模板字面值（最推薦）

const content = "內容";
const html = `<div>${content}</div>`;
console.log(html);

• 支援多行、插值 ${expr}、標籤函數。
• 無需手動處理引號跳脫，可讀性最高。

正確寫法四：字串連接運算子 +

const html = "<div>" + "內容" + "</div>";

適合簡單單行拼接。

常見誤區補充

• str = str + "x" 每次產生新字串，大量迴圈建議用陣列 push + join 或 StringBuilder (Java) / StringBuilder (C#)。
• JS 無 StringBuilder，但現代引擎對 += 已優化，一般情況下直接用 let s = ""; s += ... 即可。

總結

+= 左側必須是變數。建議使用 **ES6 模板字面值 `...${var}...`** 或 **陣列 join**，語法清晰且效能佳。