JavaScript setTimeout 字符串參數中單引號的作用與最佳實踐

代碼片段

var repeat = "moveElement('" + elementID + "'," + final_x + "," + final_y + "," + interval + ")";
movement = setTimeout(repeat, interval);

單引號作用

將 elementID 的值作為**字符串字面量**傳遞給 moveElement。假設 elementID = "myDiv"：

• **加單引號**：生成 moveElement('myDiv', 100, 200, 50)，函數接收字符串 "myDiv"，內部通常用 document.getElementById(id) 查找元素。
• **不加單引號**：生成 moveElement(myDiv, 100, 200, 50)，JS 引擎將 myDiv 視為**變量名**，要求全局作用域存在 var myDiv = ... 或元素 id="myDiv" 自動映射為全局變量（非標準、不可靠）。

隱患與最佳實踐

1. 避免字符串拼接代碼：setTimeout 接收字符串等同 eval，效率低、難調試、易注入（含引號需轉義）。
2. 使用匿名函數/箭頭函數（推薦）：

   movement = setTimeout(() => {
       moveElement(elementID, final_x, final_y, interval);
   }, interval);

   優勢：直接捕獲變量作用域，無拼接、無轉義、可斷點調試、性能更好。

3. 若必須用字符串：嚴格轉義單雙引號，如 elementID.replace(/'/g, "\\'")。

現代 JS 開發**堅決不用字符串版 setTimeout/setInterval**，改用函數引用形式。