TypeScript 模板字符串（Template Literals）实战指南：插值、多行与标签模板

TypeScript 模板字符串Template Literals实战指南插值、多行与标签模板【免费下载链接】typescript-book:books: The definitive guide to TypeScript and possibly the best TypeScript book :book:. Free and Open Source 项目地址: https://gitcode.com/gh_mirrors/ty/typescript-book导读模板字符串Template Literals又称模板字面量是 TypeScript 赋予 JavaScript 开发者的现代字符串处理能力它用反引号替代单引号或双引号一举解决字符串插值、多行文本和字符串预处理三大痛点。本文以 docs/template-strings.md 为主线结合仓库内 code/es6/template-strings.ts 与其编译产物 code/es6/template-strings.js完整讲解语法、典型场景、标签模板的类型检查机制以及向下兼容旧 ES 目标的编译原理读完即可在真实项目中直接使用。一、模板字符串的三大动机从语法上看模板字符串只是把定界符从单引号/双引号换成了反引号var str I am a template literal;但这一语法替换背后有明确的设计动机共三点字符串插值String Interpolation在字符串中直接嵌入变量与任意表达式多行字符串Multiline Strings无需转义即可书写跨行文本标签模板Tagged Templates通过前置函数对模板内容进行自定义预处理。这三大能力使得模板字符串成为日常编码中不可或缺的工具。在本书的目录结构中模板字符串归属于 Future JavaScript Nowdocs/future-javascript.md章节——即未来的 JavaScript现在就能用这正是 TypeScript 的核心卖点之一让开发者在新旧 JavaScript 引擎包括当前浏览器和 Node.js上提前使用 ES6 及更高版本的语言特性同时享受类型检查带来的安全与自动补全。二、字符串插值String Interpolation字符串插值是最常见的使用场景用一段静态字符串拼接若干变量来生成目标字符串。在模板字符串出现之前这种需求依赖笨拙的字符串连接你不得不自己实现拼接模板逻辑——模板字符串最初的名字template strings正源于此后来官方正式更名为template literals。传统方式需要显式使用拼接且容易因引号嵌套而出错var lyrics Never gonna give you up; var html div lyrics /div;使用模板字符串后变量直接用${...}占位符嵌入var lyrics Never gonna give you up; var html div${lyrics}/div;需要注意${与}之间的任意占位符都被当作 JavaScript 表达式求值而不只是简单变量替换因此可以直接做数学运算、调用函数、嵌套三元表达式等console.log(1 and 1 make ${1 1}); // 输出: 1 and 1 make 2仓库示例 code/es6/template-strings.ts 的m3、m4模块正是上述两种写法的对照m5模块则演示了表达式插值module m5 { console.log(1 and 1 one make ${1 1}); }实践要点表达式插值让模板字符串天然适合拼接 URL、SQL、HTML 片段和日志消息且可读性远高于逐段连接。三、多行字符串Multiline Literals在模板字符串出现之前想在 JavaScript 字符串中放入换行非常麻烦必须先使用续行符\转义字面换行再在下一行手动插入\n转义序列两段代码才能拼出一个带换行的完整字符串var lyrics Never gonna give you up \ \nNever gonna let you down;这种写法既反直觉也极易在编辑器换行处理中出错。使用 TypeScript 模板字符串后只需在反引号内直接换行书写换行符会被原样保留var lyrics Never gonna give you up Never gonna let you down;仓库示例的m1传统转义写法与m2模板字符串写法构成了直接对照module m1 { var lyrics Never gonna give you up \ \nNever gonna let you down; console.log(lyrics); } module m2 { var lyrics Never gonna give you up Never gonna let you down; console.log(lyrics); }实践要点多行模板字符串非常适合嵌入歌词、SQL 语句、ASCII 图表、邮件正文等需要保留换行和缩进的内容由于缩进原样保留书写时建议使用不带额外前导空格的排版方式或配合去掉公共缩进的工具函数处理。四、标签模板Tagged Templates标签模板是模板字符串最强大也最容易被忽略的能力。你可以在模板字符串前面放置一个函数称为 tag标签函数该函数获得机会对模板字符串的所有静态字面量片段以及所有占位符表达式的值进行预处理然后返回任意结果。标签函数的入参规则如下第一个参数所有静态字面量片段组成的数组literals其余参数所有占位符表达式的求值结果最常用的做法是用 rest 参数把它们收拢成数组...placeholders。下面是一个名为htmlEscape的标签函数示例它把模板中所有占位符里的 HTML 敏感字符转义为实体从而安全地生成 HTMLvar say a bird in hand two in the bush; var html htmlEscape div I would just like to say : ${say}/div; // 一个示例标签函数 function htmlEscape(literals: TemplateStringsArray, ...placeholders: string[]) { let result ; // 把字面量片段与占位符值交错拼接 for (let i 0; i placeholders.length; i) { result literals[i]; result placeholders[i] .replace(//g, amp;) .replace(//g, quot;) .replace(//g, #39;) .replace(//g, lt;) .replace(//g, gt;); } // 追加最后一个字面量片段 result literals[literals.length - 1]; return result; }调用后html中原来的会被安全转义为gt;从根本上避免用户输入注入 HTML 的风险。仓库示例 code/es6/template-strings.ts 的m6模块给出了完整的等价实现未标注类型的运行时版本。类型检查要点重要标签函数的placeholders可以标注为任意[]类型。无论标注成什么TypeScript 都会对调用标签时传入的占位符做类型检查确保实际值与标注一致。例如若你预期同时处理string和number可以这样标注function myTag(literals: TemplateStringsArray, ...placeholders: (string | number)[]) { ... }literals建议标注为TemplateStringsArrayTypeScript 提供的专用类型描述模板字面量数组并带有只读的raw属性占位符类型越精确类型系统越能在编译期拦截错误的模板调用这正是类型安全胜过普通 JS 模板字符串的地方。实践要点标签模板适用于 HTML/URL/SQL 转义、国际化i18n消息格式化、SQL 语句参数化、日志着色等需要在拼接前统一加工的场景。五、编译产物模板字符串如何降级为旧 JS模板字符串属于 ES6 特性。当编译目标为 ES5 及更早版本如es5、es3时TypeScript 编译器会把模板字符串降级为等价的基础语法。仓库中 code/es6/template-strings.js 就是 code/es6/template-strings.ts 在 ES 目标下编译后的真实产物本项目 code/es6/tsconfig.json 为空配置编译采用默认目标对应旧版运行时环境规则非常简单多行字符串 → 转义字符串源码中的真实换行被编译为\n等转义序列。对比m1源码中手写\\n与m2源码中直接换行编译后的输出即可看到m2的多行模板字符串被等价编译成了带\n的普通字符串var lyrics Never gonna give you up\nNever gonna let you down;字符串插值 → 字符串拼接${expr}被编译为... expr ...形式的普通拼接。例如m4编译为var html div lyrics /div;m5的表达式插值编译为console.log(1 and 1 one make (1 1));注意表达式被括起来(1 1)以保持求值优先级与原语义完全一致。标签模板 → 函数调用编译后生成一个字面量数组 所有占位符值的调用序列。m6编译产物的核心一行是var html (_a [div I would just like to say : , /div], _a.raw [div I would just like to say : , /div], htmlEscape(_a, say));可以看到字面量片段数组被显式构造出来并附带raw属性say作为占位符值作为第二个实参传入标签函数内部再用arguments机制收集其余占位符值。因此即便你的运行环境只支持 ES5TypeScript 也能保证模板字符串的语义被忠实地翻译过去——无需任何运行时 polyfill这是模板字符串相比其他 ES6 特性更便宜的优势之一。若编译目标设为 ES6如es6则模板字符串会原样输出交由运行时原生处理。六、总结模板字符串为 JavaScript经由 TypeScript补齐了三项语言级能力多行字符串与字符串插值任何语言都值得拥有的基础能力现在可以直接在 JavaScript 中使用标签模板允许构建强大的字符串工具函数如htmlEscape且占位符类型受 TypeScript 静态检查保护向后兼容编译到旧 ES 目标时自动降级为转义字符串、字符串拼接与函数调用可放心用于当前浏览器与 Node.js 环境。想进一步加深理解可继续阅读同一章节的姊妹篇 docs/rest-parameters.md标签模板依赖的 rest 参数语法详解、docs/destructuring.md 与 docs/spread-operator.md并在 code/es6/template-strings.ts 与编译产物 code/es6/template-strings.js 的对照中亲手验证每种写法的降级结果。【免费下载链接】typescript-book:books: The definitive guide to TypeScript and possibly the best TypeScript book :book:. Free and Open Source 项目地址: https://gitcode.com/gh_mirrors/ty/typescript-book创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考