![]()
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聲明變量——能跑,但沒必要。
你在代碼庫里見過最離譜的字符串拼接寫法是什么?是十幾個變量連環相加,還是為了可讀性強行拆成七八行?
特別聲明:以上內容(如有圖片或視頻亦包括在內)為自媒體平臺“網易號”用戶上傳并發布,本平臺僅提供信息存儲服務。
Notice: The content above (including the pictures and videos if any) is uploaded and posted by a user of NetEase Hao, which is a social media platform and only provides information storage services.