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年的代码库里，多久还能看见 + 号的字符串拼接？