企业官网建设流程全解析

• 教程

本指南基于 jstips 开源仓库第 9 条 JS 技巧（_posts/zh_CN/javascript/2016-01-09-template-strings.md）展开，系统讲解 ES6 模板字符串如何替代传统引号拼接、在${}中执行表达式与三元逻辑、免\n生成多行字符串，以及用函数加工输出内容的带标签模板字符串。读完你将掌握模板字符串的核心语法、常见实战写法与埋点调试中的典型用法，并能在日常编码中直接用更简洁、更安全的插值方式替换+拼接。

一、为什么需要模板字符串：告别引号拼接

在 ES6 之前，JavaScript 拼字符串只能靠单引号或双引号与+运算符手工连接。变量一多，代码既冗长又容易漏掉空格、引号或类型转换的坑。ES6 引入了模板字符串（template strings），用反引号（`）包裹文本，成为引号拼接的正式替代方案。仓库原文示例：

普通字符串拼接：

var firstName = 'Jake'; var lastName = 'Rawr'; console.log('My name is ' + firstName + ' ' + lastName); // My name is Jake Rawr

模板字符串写法：

var firstName = 'Jake'; var lastName = 'Rawr'; console.log(`My name is ${firstName} ${lastName}`); // My name is Jake Rawr

两段代码输出完全一致，但后者不再需要手工补空格和+，可读性明显提升。该技巧在仓库中被编号为 Tip 09，与英文原版（_posts/en/javascript/2016-01-09-template-strings.md）及繁体中文版（_posts/zh_TW/javascript/2016-01-09-template-strings.md）内容保持一致。

二、${}插值：变量、表达式与三元逻辑

模板字符串的核心是${}插值语法：花括号内可以是变量、简单表达式（如2 + 3），甚至完整的逻辑判断。仓库原文演示了在插值中直接使用三元运算符：

var val1 = 1, val2 = 2; console.log(`${val1} is ${val1 < val2 ? 'less than': 'greater than'} ${val2}`) // 1 is less than 2

该例中的${val1 < val2 ? 'less than' : 'greater than'}是一个完整的条件表达式，插值结果会根据比较结果动态切换文案。需要留意：插值中的三元表达式建议像示例一样整体加括号包裹，保证运算优先级清晰，也便于阅读。凡是返回值的表达式（函数调用、算术、属性访问、数组/对象字面量等）都可以放入${}，引擎会自动调用其toString()转换后拼入字符串。

三、多行字符串：不再需要\n转义

在模板字符串里，换行符会被原样保留，无需使用\n拼接。这是它与普通引号字符串最直观的差异之一：

const message = `第一行 第二行 第三行`; console.log(message); // 第一行 // 第二行 // 第三行

反引号包裹的多行文本中，换行直接作为字符串内容输出；而普通单/双引号字符串中写换行必须用\n，否则会直接报语法错误。使用多行模板字符串时注意两点：一是缩进空格会被原样保留（会影响对齐），二是结尾的反引号前不要残留多余换行。

四、带标签的模板字符串：用函数加工输出

除了静态插值，还可以用函数加工模板字符串的输出，这种用法称为带标签的模板字符串（tagged template strings）。其基本形态是：函数名直接放在反引号前，模板字符串的所有字面量片段与插值结果会作为参数传入该函数，由函数决定最终返回什么字符串。仓库原文将此特性描述为“使用函数修改模板字符串的输出内容”，并指向了 MDN 的官方示例。一个最小可运行的加工示例：

function tag(strings, ...values) { // strings: 被插值分隔开的字面量片段数组 // values: 各 ${} 表达式的求值结果 return strings[0] + values.map((v, i) => v.toUpperCase() + strings[i + 1]).join(''); } const name = 'jake'; console.log(tag`hello ${name}, welcome to ${'jstips'}`); // hello JAKE, welcome to JSTIPS

这里tag函数把每个插值结果转成大写后重新拼接，返回加工后的新字符串。实际场景中，带标签模板常用于 i18n 翻译、HTML 转义（防止 XSS）、日志格式化等——凡是需要统一改写插值内容的场景，都可借助标签函数实现，而无需改动模板本身的书写方式。

五、仓库实战佐证：模板字符串在 jstips 其他技巧中的典型用法

模板字符串不只是孤立语法，在 jstips 仓库的多个技巧中都被当作标准输出写法反复使用，可以作为理解其实战价值的佐证：

• 在函数参数默认值技巧（_posts/zh_CN/javascript/2016-01-12-pseudomandatory-parameters-in-es6-functions.md）中，利用 ES6 默认参数实现伪强制参数校验，模板字符串可作为生成错误信息的简洁载体。
• 在快速调试技巧 tap（_posts/en/javascript/2017-03-16-tapping-for-quick-debugging.md）中，链式调用日志直接写成console.log(`${c.id} | ${c.tax_number} (${c.name}) => ${c.balance}`)，多个插值并列输出对象字段，正是典型的多变量格式化日志场景。
• 在数组遍历技巧（_posts/en/javascript/2017-06-15-looping-over-arrays.md）中，诸如console.log(`At index ${index} in array ${array} the value is ${current_value}`)的写法，演示了在循环体内用模板字符串汇总索引与值的输出模式。

这些用法共同印证：凡是原本需要'...' + a + '...' + b的地方，都可以用`...${a}...${b}`一行替代，且语义更清晰、不易出错。

六、注意事项与适用前提

1. 运行环境：模板字符串是 ES6（ECMAScript 2015）语法，需要在支持 ES6 的现代浏览器或 Node.js 环境中运行；旧版本浏览器需经 Babel 等工具转译后才能使用。
2. 反引号转义：模板字符串内部如需输出反引号本身，须用\`` 转义；需要输出${字面量时，也要对$或{` 做转义处理。
3. 性能与可读性：模板字符串不是函数，解析成本与手写拼接差异可忽略，优先以可读性为准；但涉及极高频循环内的字符串构建时，仍可按实际场景评估是否改用数组join等方式。
4. 不要替代一切：带标签模板虽强大，但仅在你确实需要对插值结果做统一加工时才使用，普通输出直接用${}即可，避免过度设计。

想进一步了解模板字符串的完整细节，可参考仓库内对应英文原文（_posts/en/javascript/2016-01-09-template-strings.md）与繁体中文版（_posts/zh_TW/javascript/2016-01-09-template-strings.md），并按本指南中的示例逐步在控制台验证输出。

• 教程