面试题：JavaScript中模板字符串与普通字符串插值的区别

Question

请阐述JavaScript中模板字符串使用插值语法与普通字符串拼接方式实现变量嵌入的主要区别，并分别举例说明。

Answer 1

区别

1. 语法复杂度：
   • 普通字符串拼接：使用+运算符连接字符串和变量，当拼接内容较多时，语法较为繁琐，需要注意在合适的位置添加+和引号。
   • 模板字符串插值语法：使用反引号（）包裹字符串，变量嵌入使用${}`语法，语法更简洁直观。
2. 可读性：
   • 普通字符串拼接：由于需要频繁添加+和引号，代码可读性较差，尤其是当嵌入变量较多或字符串较长时。
   • 模板字符串插值语法：更符合自然语言表达习惯，将变量嵌入字符串中，更易理解和维护。
3. 换行处理：
   • 普通字符串拼接：换行时需要在每行末尾添加+，较为麻烦。
   • 模板字符串插值语法：可以直接在模板字符串中换行，无需额外处理。

举例

1. 普通字符串拼接：

let name = 'John';
let age = 30;
let message = 'My name is'+ name +'and I am'+ age +'years old.';
console.log(message); 

2. 模板字符串插值语法：

let name = 'John';
let age = 30;
let message = `My name is ${name} and I am ${age} years old.`;
console.log(message); 

在模板字符串中，还可以进行表达式计算等操作，例如：

let num1 = 5;
let num2 = 3;
let result = `The sum of ${num1} and ${num2} is ${num1 + num2}`;
console.log(result); 

而普通字符串拼接实现相同功能则需要更复杂的语法：

let num1 = 5;
let num2 = 3;
let result = 'The sum of'+ num1 +'and'+ num2 +'is'+ (num1 + num2);
console.log(result);