JavaScript 字串連接陷阱："border:" + 1 + 1 產生 "11" 而非 "2"

問題代碼

document.getElementById("p1").style.cssText = "border:" + 1 + 1 + "px dashed green;color:red";
// 結果：border:11px ...

原因分析

JS + 運算子左結合，且字串與數字相加會觸發字串連接：

1. "border:" + 1 → "border:1"（字串）
2. "border:1" + 1 → "border:11"（字串連接）
3. 後續再加 "px..." 仍為字串連接。

正確寫法：括號優先計算數學運算

document.getElementById("p1").style.cssText = "border:" + (1 + 1) + "px dashed green;color:red";
// (1+1) → 2 (數字相加) → "border:2px ..."

其他解法

• 模板字面量 (ES6)：\`border:${1+1}px dashed green;color:red\`
• 預先計算：var w = 1+1; "border:" + w + "px..."
• Number() 強制："border:" + Number(1+1) + "px..."（多餘但明確）。

核心原則

字串連接表達式中，任何位置出現字串會將後續 + 變為連接。需用括號隔離純數學運算，或使用模板字面量避免歧義。