JavaScript反引号字符串中$符号的作用及使用必要性咨询

一、$符号的作用 #

在JavaScript的反引号模板字符串里，$是插值语法的标识，必须配合大括号${}一起使用：

• $会提示JS引擎，后续大括号内的内容是需要执行的表达式（可以是变量、函数调用、算术运算、三元判断等）；
• 引擎会先计算大括号里的代码，把结果转为字符串后，替换到模板字符串的对应位置。

比如你提供的示例1中，${animals.slice(11,17)}就是先执行切片方法得到eagles，再把这个值插入到字符串的对应位置。

二、为什么用模板字符串插值而非字符串拼接 #

虽然两种写法输出结果一致，但模板字符串的优势非常明显：

1. 可读性大幅提升 #

字符串拼接需要用大量+连接变量和固定文本，还得手动处理空格（比如示例2里的' ' + 'and'+ ' '），代码杂乱且阅读时要反复拆分逻辑；而模板字符串直接像写自然句子一样，结构清晰，一眼就能看懂最终输出的内容框架。

2. 降低出错概率 #

拼接时很容易漏写+号、空格或者引号，比如不小心把' ' + 'and' + ' '写成'and'，就会输出eaglesandowls...这类错误内容；模板字符串里直接按正常排版写空格，完全不用操心这类低级错误。

3. 原生支持多行字符串 #

如果要输出多行内容，字符串拼接需要手动添加\n或者处理换行转义，而模板字符串直接换行即可，比如：

// 拼接方式
console.log('第一行\n第二行\n第三行');
// 模板字符串方式
console.log(`第一行
第二行
第三行`);

显然模板字符串的写法更直观、更符合日常书写习惯。

4. 支持复杂表达式直接嵌入 #

模板字符串的${}里可以直接写复杂逻辑，比如：

let num = 10;
console.log(`数字的两倍是${num * 2}，是否大于15？${num * 2 > 15 ? '是' : '否'}`);

如果用拼接的话，要么先把结果存到变量里，要么写很长的拼接链，代码会变得臃肿且难以维护。

代码示例对比 #

示例1（模板字符串）

let animals = 'elephants, eagles, owls, and tigers';
console.log(`${animals.slice(11,17)} and ${animals.slice(19,23)} are cool birds`);

示例2（字符串拼接）

let ani = 'elephants, eagles, owls, and tigers';
console.log(ani.slice(11,17) + ' ' + 'and'+ ' '+ ani.slice(19,23) + ' ' + 'are cool birds');

输出结果 #

eagles and owls are cool birds
eagles and owls are cool birds

内容的提问来源于stack exchange，提问作者Izza Ijaz