JS字符串拼接栽了15年，ES6用1個符號翻盤

2015年之前，全球JavaScript開發者每年在字符串拼接上浪費的時間，換算成時薪足夠買下一個小國。不是夸張——你打開任何一份2014年的前端代碼庫，+ 號像牛皮癬一樣爬滿屏幕，變量和引號交錯成莫爾斯電碼。

ES6發布那年，有個功能被嚴重低估：模板字面量（Template Literals）。它用一對反引號 ` 替換了雙引號，順便把 + 號送進了養老院。9年過去，仍有23%的Stack Overflow字符串相關問題在問"怎么換行"，答案早在2015年就寫好了。

加號拼接的隱性成本

先看一段"考古代碼"：

let message = "Hello, my name is " + name + " and I am " + age + " years old."

這段字符串包含4個變量插槽，卻用了6個引號和5個加號。維護者需要像玩拼圖一樣，在腦中還原最終輸出。2014年GitHub的一項內部研究顯示，字符串拼接錯誤占JavaScript運行時異常的12%，其中70%源于引號不匹配或空格遺漏。

多行文本更是災難。舊方案依賴 \n 轉義符：

let text = "This is line one.\n" +
" This is line two.\n" +
" This is line three.";

每行末尾的 + 號是視覺噪音，縮進對齊全靠手調。代碼審查時，審查者需要逐字符比對引號位置——這不是編程，是校對。

反引號的降維打擊

模板字面量的核心設計只有兩點：${} 插值語法，以及原生支持多行。

同一需求的新寫法：

let message = `Hello, my name is ${name} and I am ${age} years old.`;

引號數量從6個降到2個，加號歸零。變量嵌入用 ${} 包裹，視覺上與字符串主體隔離。更關鍵的是——換行符不再需要轉義：

let text = `This is line one.
This is line two.
This is line three.`;

輸入什么，輸出就是什么。這對生成HTML片段、SQL查詢、JSON字符串的場景是質變。Netflix 2016年遷移至ES6后，前端團隊的模板相關bug下降了34%，代碼行數減少約18%。

被低估的生產力杠桿

模板字面量真正的殺招藏在細節里。

動態URL構造：

let userId = 42;
let url = `https://api.example.com/users/${userId}`;

調試日志：

console.log(`User ${name} logged in at ${time}`);

甚至直接嵌入HTML：

let html = `

${name}

這些場景在舊語法下都需要多層引號嵌套，極易出錯。模板字面量把"字符串構造"從工程問題降級為語法糖問題——開發者不再需要考慮怎么拼，只需要考慮拼什么。

一個反直覺的數據：ES6特性使用率調研中，箭頭函數和Promise的采用率超過90%，而模板字面量僅78%。剩余22%的開發者中，相當一部分仍在維護舊項目，另一部分則習慣了IDE自動補全的 + 號拼接——工具掩蓋了問題，但問題沒有消失。

2015年TC39委員會在草案里寫了一句備注：「Template literals are designed to be the default string form in modern JavaScript.」9年后，這個"默認"仍未完全兌現。你在2024年的代碼庫里，多久還能看見 + 號的字符串拼接？