JS字符串拼接虐了開發者10年，1個反引號讓它翻了身

2015年之前，全球JavaScript開發者每年在字符串拼接上浪費的時間，加起來可能夠寫三個React。不是夸張——你寫個帶變量的HTML片段試試，引號套引號，加號連加號，調試時眼睛都要串行。

ES6用一對反引號（`）把這事徹底改了，但10年過去了，還有人不知道它能干這么多臟活累活。

從"字符串地獄"到一行搞定

老辦法的痛點很具體。變量一多，代碼變成這樣：

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

三個加號，兩段引號，中間還得留神空格。項目大了之后，這種代碼像毛衣起球——看著難受，拆又不敢拆。維護的人得逐字符檢查，生怕漏個空格或者把變量名拼錯。

模板字面量（Template Literals）的解法粗暴有效：反引號包裹，${}插值。同一行需求變成：

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

可讀性差距肉眼可見。更重要的是，${}里能放任何表達式——函數調用、三元運算、甚至另一個模板字符串。這不是語法糖，是生產工具的換代。

多行文本：從\n地獄到原生換行

老JS處理多行字符串堪稱行為藝術。你要么用\n硬編碼，要么用數組join，要么冒險用反斜杠續行——但后者在某些瀏覽器會炸。

典型寫法長這樣：

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

模板字面量直接允許物理換行：

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

代碼里的換行就是真實換行，不需要轉義。寫HTML模板、SQL語句、或者任何需要保留格式的文本時，這個特性省下的精力，夠你多寫兩套單元測試。

被低估的實戰場景

URL拼接是模板字面量的隱形主場。動態構建API請求時：

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

對比字符串拼接的版本，你不再需要操心引號和加號的排列組合。更隱蔽的好處是：代碼審查時一眼就能看出URL結構，不用在腦子里做字符串拼接的模擬運算。

HTML片段生成同理。早期前端用字符串拼DOM是常態，現在哪怕你用框架，調試時偶爾還是需要手動構造HTML：

let html = `

${name}

引號沖突問題直接消失。class屬性用雙引號？沒問題，外層是反引號，不打架。

日志輸出是另一個高頻場景。調試時你想快速打印變量狀態：

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

不需要先拼字符串再傳參，一行寫完，看完就刪。這種"用完即走"的編碼體驗，累積起來就是效率差距。

為什么還有人不用？

一個反直覺的事實：模板字面量2015年隨ES6發布，但直到今天，某些遺留代碼庫和教程里，字符串拼接仍是默認寫法。慣性比技術缺陷更難修復。

更深層的原因是認知門檻。反引號在鍵盤上位置偏僻，新手容易和單引號混淆。加上早期瀏覽器兼容性顧慮（IE11不支持），很多人形成了"能不用就不用"的肌肉記憶。

但2025年的現在，兼容性早已不是借口。Node.js、現代瀏覽器、甚至小程序環境，模板字面量都是基線支持。還在用加號拼接字符串，相當于2025年還在用var聲明變量——能跑，但沒必要。

你在代碼庫里見過最離譜的字符串拼接寫法是什么？是十幾個變量連環相加，還是為了可讀性強行拆成七八行？