在 TypeScript 中，我们经常需要构建字符串来完成各种操作，例如拼接 URL、生成 HTML 来渲染页面、生成动态文本等等。而在传统的 JavaScript 中，生成字符串需要通过字符串拼接或者字符串模板的方式来完成，这种方式虽然非常方便，但是它在类型检查和语法错误的处理上都存在一定的问题。
为了解决这些问题，TypeScript 引入了模板字符串的概念。模板字符串是一种新的字符串形式，它可以让我们更加方便的生成字符串，同时也解决了类型检查和语法错误的问题。
什么是模板字符串？
模板字符串是一种用反引号 ` 包裹的字符串，它支持插入 JavaScript 表达式，并且可以跨行定义，例如：
const hello = `Hello World`;
const multiLine = `
This is a
multi-line string
`;
const value = 100;
const message = `The result is: ${value + 20}`;相较于传统的字符串拼接方式，模板字符串具有以下几个优点：
- 可以跨行定义复杂的字符串，不再需要手动拼接换行符。
- 可以通过 ${} 将 JavaScript 表达式嵌入到字符串中。
- 在编译期间，TypeScript 会进行错误检查和类型推断，避免了一些潜在的问题。
模板字符串的使用
模板字符串基础
最基本的使用方式是将字符串直接用反引号 ` 包裹起来，例如：
const message = `Hello World`; console.log(message);
如果需要跨行定义字符串，可以写成下面的形式：
const message = ` This is a multi-line string `; console.log(message);
需要注意的是，在使用反引号包裹字符串时，对于字符串中出现的反引号需要进行转义处理。
插入表达式
除了可以在模板字符串中定义普通的字符串，还可以在其中插入 JavaScript 表达式。在模板字符串中，可以使用 ${} 将任意 JavaScript 表达式插入到字符串中，例如：
const value = 100;
const message = `The result is: ${value + 20}`;
console.log(message);在实际应用中，插入表达式可以方便的生成一些动态文本，例如构建一个 URL：
const baseUrl = 'https://example.com';
const path = '/login';
const query = {
name: '张三',
age: 18,
}
const url = `${baseUrl}${path}?${new URLSearchParams(query).toString()}`;
console.log(url);嵌套模板字符串
如果需要在模板字符串中嵌套另一个模板字符串，可以使用反引号 ` 再次包裹字符串。这种嵌套的模板字符串被称为嵌套模板字符串，例如：
-- -------------------- ---- ------- ----- ---- - -------- ----- ------- - - ----- -------- ------- -- --- -------- ---- ------- ----------- -- -- -------- ------- ----- --------- --------- --------------------- -- ---------------------
总结
在 TypeScript 中，使用模板字符串可以方便的生成各种字符串。相较于传统的字符串拼接方式，模板字符串具有更好的可读性和可维护性，并且在编译期间进行错误检查和类型推断，可以避免一些潜在的问题。在实际应用中，我们可以灵活的应用模板字符串，生成各种动态文本。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64a37f1048841e9894fd77cf