2026年11月5日，掘金作者 vipxieliang 發表了一篇講 JavaScript 模板字符串與標籤模板的技術長文，四分鐘的閱讀長度，累積超過一萬次瀏覽。一篇 ES6 語法教學文在推出十年後的今天仍有這種熱度，說明這塊知識點對許多開發者來說，始終處於「天天在用，卻沒真正搞懂」的狀態。這篇文章把原文的要點整理成一般人也能讀懂的版本，並說明它與你日常寫程式、甚至上網安全之間的關係。
從加號拼接說起：舊時代的痛
ES6 之前，JavaScript 開發者組合字串靠的是加號。變數一多，引號、加號、空格混成一團；想換行得手寫 \n；段落一長，可讀性直接崩塌。這就像手工拼貼海報，每個字都要自己剪、自己黏，貼錯一格就得整張重來。
ES6 引入的模板字符串用反引號包裹字串，一次解決兩個問題：多行文字直接換行就能寫，變數用 ${} 塞進字串裡。寫什麼長什麼，像從剪貼換成了排版軟體。
兩個細節值得留意。第一，縮進會被原樣保留，每行開頭的空格都會進入字串，產生 SQL 或做字串比對時，最好先 trim() 處理。第二，字串裡真的需要出現反引號要寫成 `，出現 ${ 要寫成 ${，否則會被當成插值處理。
${} 裡能放什麼：表達式，不是語句
插值的規則其實很寬鬆：${} 裡可以放任何表達式。乘法可以，三元判斷可以，呼叫方法也可以，甚至嵌套另一個模板字符串，用 map 產生整份清單也行。
原文點出一個常見誤區：${} 只接受表達式，不接受 if、for 這類語句。邏輯一複雜，正確做法是先在外面算好，把結果放進去。這條界線像填表格，格子裡能填「值」，不能填一整套流程。
標籤模板：把字串變成函式呼叫
真正進階的部分是標籤模板。在模板字符串前面加一個函式名，整個字串就變成一次函式呼叫。函式會收到兩組參數：一組是被插值切開的靜態片段陣列 strings，另一組是每個 ${} 求值後的結果 values。
用日常比喻，標籤模板像一臺果汁機。靜態片段是果肉，插值是你臨時丟進去的材料，機器把兩者分開處理，最後給你一杯成品。關鍵在於「分開」這件事：因為程式能明確區分哪些是固定文字、哪些是外部輸入，它就能只對外部輸入做檢查或轉義。
這正是安全場景的基石。處理 HTML 時，使用者輸入的內容如果直接拼進字串，就可能形成 XSS 攻擊。透過標籤函式對 values 做轉義，固定的部分照常輸出，危險的部分先消毒再組裝，安全性由機制保證，而非依賴開發者記得手動處理。
同一套機制撐起了前端生態裡不少常見工具。styled-components 的樣式寫法、Lit 的 html 模板、GraphQL 的 gql 查詢字串，底層都是標籤模板。國際化函式庫用它處理複數與語序，語法高亮工具用它切分程式碼片段。你未必自己寫過標籤函式，但多半已經是它的使用者。
所以呢：給開發者的三個判斷
第一，字串邏輯一複雜就換模板字符串，別再跟加號搏鬥，可讀性就是維護成本。第二，遇到「把使用者輸入放進 HTML 或 SQL」的場景，優先考慮標籤函式做轉義，而不是事後補洞。第三，讀懂 strings 與 values 的分離結構，是理解主流前端函式庫原始碼的入場券。
模板字符串表面上是語法糖，標籤模板則把它變成可編程的字串處理管線。十年過去，這組語法沒有被淘汰，反而被更多工具建立在上面，這本身就是它價值的最好說明。