JS模板字符串使用技巧提升可读性

一分耕耘，一分收获！既然打开了这篇文章《JS模板字符串怎么用？提升代码可读性技巧》，就坚持看下去吧！文中内容包含等等知识点...希望你能在阅读本文后，能真真实实学到知识或者帮你解决心中的疑惑，也欢迎大佬或者新人朋友们多留言评论，多给建议！谢谢！

模板字面量是ES2015+标准中用反引号`定义的字符串类型，支持嵌入表达式${...}、多行书写、无需转义换行，提升可读性与维护性；还支持带标签的预处理功能。

模板字面量（Template Literal）就是用反引号 ` 包裹的字符串

它不是语法糖，而是 JavaScript 正式标准（ES2015+）中新增的字符串字面量类型。和单引号 '、双引号 " 字符串不同，` 支持嵌入表达式、多行书写、无需转义换行符——这些特性直接解决传统字符串拼接难读、易出错的问题。

用 ${...} 嵌入变量和表达式，替代 + 拼接

这是最常用也最容易提升可读性的点。尤其在拼接多个变量、带逻辑的值或函数调用结果时，${...} 让结构一目了然。

const name = 'Alice';
const age = 28;
const city = 'Shanghai';
<p>// ❌ 旧写法：括号多、空格难对齐、容易漏加号
const msg1 = 'Hello, ' + name + '! You are ' + age + ' years old and live in ' + city + '.';</p><p>// ✅ 新写法：变量位置即语义位置，表达式可直接写
const msg2 = <code>Hello, ${name}! You are ${age} years old and live in ${city}.</code>;
const msg3 = <code>Next year you'll be ${age + 1}.</code>;
const msg4 = <code>Status: ${age >= 18 ? 'adult' : 'minor'}</code>;</p>

注意：${...} 里可以是任意 JavaScript 表达式，包括函数调用、对象属性访问、甚至另一个模板字面量——但别嵌套太深，否则反而降低可读性。

多行字符串天然支持，不用 \n 或 + 换行

反引号内的换行会被保留为字符串中的实际换行符，适合生成 HTML 片段、SQL 查询、CLI 提示等需要格式对齐的场景。

• 写 HTML 时不再需要把所有标签挤在一行或手动加 \n
• SQL 查询中字段对齐、WHERE 条件分行更清晰
• 错误消息或日志模板可保留缩进，提高人眼扫描效率

const html = `
<div class="user-card"><h2>${name}</h2><p>Age: ${age}</p><p>City: ${city}</p></div>
`;
<p>const query = <code> SELECT id, name, email FROM users WHERE status = 'active' AND created_at > '${new Date(Date.now() - 7 * 24 * 60 * 60 * 1000).toISOString().split('T')[0]}' </code>; </p>

⚠️ 注意：首行和末行的换行会进入字符串。如果不需要开头空行，把 ` 放在行首；如果不需要结尾换行，把 ` 紧贴最后一行内容。

带标签的模板字面量（Tagged Template Literals）能做字符串预处理

在反引号前加一个函数名（如 html`...`），该函数会收到字符串片段数组和插值表达式值作为参数。这是实现 XSS 过滤、国际化、样式插值等高级功能的基础机制。

function sanitize(strings, ...values) {
  return strings.reduce((acc, str, i) => {
    const value = values[i] ?? '';
    return acc + str + String(value).replace(/, '<').replace(/>/g, '>');
  }, '');
}
<p>const userInput = '<script>alert(1)</script>';
const safeHtml = sanitize<code><div>${userInput}</div></code>; // "<script>alert(1)</script>"</p>

常见标签函数有：String.raw（禁用转义）、css（配合 styled-components）、gql（GraphQL 查询）。自己实现标签函数时，务必理解 strings 是静态片段数组，values 是动态插值数组，长度恒为 strings.length - 1。

反引号不是万能胶——它不能自动防 XSS，也不能替代模板引擎的循环/条件语法。真正容易被忽略的是：模板字面量在运行时才求值，若插值表达式有副作用（比如修改状态、发起请求），每次使用都会触发；而静态字符串不会。

今天关于《JS模板字符串使用技巧提升可读性》的内容介绍就到此结束，如果有什么疑问或者建议，可以在golang学习网公众号下多多回复交流；文中若有不正之处，也希望回复留言以告知！