在构建现代 Web 应用程序时，我们经常需要将动态数据集成到文本中。无论你是要向用户展示一条友好的欢迎信息，还是要生成一段复杂的日志记录，TypeScript 中的字符串格式化都是我们不可或缺的技能。它不仅仅是简单的文本拼接，更关乎代码的可读性、可维护性以及运行时的性能表现。
你是否遇到过这样的情况：为了在句子中插入一个变量，代码变得难以阅读，充满了大量的引号和加号？或者，你是否在寻找一种更类似于 Python 或 C# 中那种优雅的 String.format 方案？在这篇文章中，我们将深入探讨在 TypeScript 中格式化字符串的各种方法，从最基础的操作到高级的自定义实现，并结合 2026 年最新的开发理念，分享实战中的最佳实践。
目录
- 使用连接符 (+)：最基础的方式
- 使用模板字面量：现代开发的标配
- 使用自定义 String.format 方法：模拟传统格式化
- 进阶实战：构建生产级模板引擎
- 性能优化与内存安全：2026 年的视角
使用连接符 (+)
在 JavaScript 和 TypeScript 的早期岁月中，加号运算符 (+) 是我们连接字符串的唯一手段。这种方法非常直观：就像做加法一样，我们将字符串片段与变量“加”在一起。虽然在 2026 年，这种方式已经不是首选，但理解它对于维护遗留代码库仍然至关重要。
基本原理与隐患
当我们使用 + 操作符时，TypeScript 引擎会按顺序计算表达式。如果操作数中有一个是字符串，另一个操作数会被自动转换为字符串。然而，这种方式在处理复杂逻辑时容易出错，特别是在处理数字和字符串混合运算时。让我们看一个容易踩坑的例子：
// 定义基础变量
let userName: string = "Alice";
let score: number = 10;
let nextLevel: number = 20;
// ❌ 错误的拼接逻辑：如果忘记括号，结果会变成字符串拼接而非数字相加
// 预期结果: "Alice, Score: 10, Next Level: 30"
// 实际结果: "Alice, Score: 10, Next Level: 1020" (字符串 "10" + "20")
let badMessage: string = "User: " + userName + ", Score: " + score + ", Next Level: " + score + nextLevel;
// ✅ 正确的做法：使用括号明确运算优先级
let goodMessage: string = "User: " + userName + ", Score: " + score + ", Next Level: " + (score + nextLevel);
console.log(badMessage); // User: Alice, Score: 10, Next Level: 1020
console.log(goodMessage); // User: Alice, Score: 10, Next Level: 30
实战见解： 在现代开发中，我们尽量避免使用加号拼接，因为它不仅难以阅读，还容易引入上述的数据类型转换错误。但在微优化某些极端性能敏感的循环时（如在游戏引擎的底层渲染循环中），少量的字符串拼接有时比创建临时函数对象更轻量，但这属于极其罕见的优化场景。
使用模板字面量
随着 ES6 的到来，模板字面量 彻底改变了我们编写字符串的方式。它允许我们在反引号 `INLINECODE8dbb0e82 `INLINECODE9fe47cf5user.nameINLINECODEe9733eb9DOMPurifyINLINECODEe9616fd7String.Format("{0} is {1}", a, b)INLINECODEe2a674dcformatINLINECODEe5f1c72aformatStringINLINECODE2f9ec417{username}INLINECODEd30b8614`INLINECODE0e221646[Template Warning] Key "${key}" not found in context.INLINECODEe8df4e58
=== 项目日报 ===
项目名称: {projectName}
当前状态: {status}
运行效率: {efficiency}%
负责人: {maintainer}
备注: {notes} (注：如果没有这个字段，会保留 {notes} 并输出警告)
INLINECODE9594bf4aSystem check ${i}INLINECODE027f2758${log.id},${log.message},${log.timestamp}
INLINECODEded10617Loop concatenation took: ${performance.now() – startBad} msINLINECODE0f569345${log.id},${log.message},${log.timestamp}INLINECODEb8826f49Array join took: ${performance.now() – startGood} msINLINECODE40b9ee2c`INLINECODEa933057astream.Readable.fromINLINECODE4d9142efINLINECODEa5641d1f…INLINECODEff95ee55INLINECODE3fb8e093+INLINECODE06463a0cformatString` 方法是最佳选择。它实现了模板与逻辑的解耦。
- 大数据量使用 Stream：当你发现自己在生成几兆字节的字符串时，停下来思考一下：我是否应该使用流式处理？或者把数据分片处理？这是资深工程师在构建高性能系统时的必备思维。
- 拥抱 AI 辅助，但不丢掉基础：虽然像 Cursor 和 GitHub Copilot 这样的工具可以自动生成复杂的格式化函数，但理解它们背后的原理（正则、类型系统、内存模型）能让我们在 AI 产生幻觉或代码有误时，迅速定位并解决问题。
希望这篇文章能帮助你更深入地理解 TypeScript 中的字符串操作！现在，当你下次需要构建动态消息时，你可以自信地选择最适合你当前需求的技术了。让我们一起编写更清晰、更健壮、更高效的代码吧！