TypeScript 是一种由微软开发的开源编程语言，它支持 JavaScript 的所有语法功能，同时还提供了额外的类型检查和注释支持。在前端开发中，经常需要处理字符串拼接的问题，而 TypeScript 提供的字符串模版语法可以简化这个过程，使拼接字符串更加方便和灵活。
模版字符串基础
模板字符串是一种特殊的字符串，使用反引号 (`) 包围，可以通过 ${} 插入表达式来创建一个包含变量和表达式的字符串。模板字符串可以跨行，且支持插入表达式、函数调用等。
示例代码：
const name = 'Tom';
const age = 24;
const message = `Hello, my name is ${name}. I am ${age} years old.`;
console.log(message); // 输出：Hello, my name is Tom. I am 24 years old.在这个例子中，使用反引号包围的字符串就是模板字符串，$ 和 {} 包裹的表达式 name 和 age 就是被插入的变量和表达式。
插入表达式
${} 中可以使用任何合法的 JavaScript 表达式，如字面量、变量、函数调用等。TypeScript 会将这些表达式求值，并将结果插入到模板字符串中。
示例代码：
const x = 3;
const y = 4;
const z = Math.sqrt(x ** 2 + y ** 2);
const message = `The length of the hypotenuse with sides of length ${x} and ${y} is ${z}.`;
console.log(message); // 输出：The length of the hypotenuse with sides of length 3 and 4 is 5.在这个例子中，使用 ${} 插入了三个表达式，分别为 x、y 和 z 表达式求值的结果。最终得到如下的文本字符串：
The length of the hypotenuse with sides of length 3 and 4 is 5.
多行字符串
模板字符串可以跨行，可以帮助我们处理多行文本的问题，这样就不用手动添加换行符 (\n) 了。
示例代码：
const message = `这是一个 多行 字符串`; console.log(message);
输出：
这是一个 多行 字符串
字符串模版的类型检查支持
在 TypeScript 中，字符串模版拥有类型检查支持，可以通过语法糖 $ 和 {} 来实现类型检查。
示例代码：
const name: string = 'Tom';
const age: number = 24;
const message: string = `Hello, my name is ${name}. I am ${age} years old.`;在这个例子中，通过声明变量的类型，让 TypeScript 对 ${name} 和 ${age} 表达式自动生成对应的类型类型检查，从而更好的保障了代码的安全性。
另外，${} 中还可以使用函数调用等操作，来生成更为复杂的字符串。需要注意的是，在使用字符串模版的过程中，一定要保证插入的表达式是保证安全的，否则可能会产生安全隐患。
总结
字符串模版是一种简化字符串拼接操作的语法糖，它通过 ${} 插入表达式，使得代码更加优雅和灵活。同时，在 TypeScript 中，字符串模版还有类型检查和安全性保障的支持，为我们开发前端应用提供了丰富的工具和支持。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/65182dbf95b1f8cacd081034