JavaScript模板字面量实用技巧

积累知识，胜过积蓄金银！毕竟在文章开发的过程中，会遇到各种各样的问题，往往都是一些细节知识点还没有掌握好而导致的，因此基础知识点的积累是很重要的。下面本文《JavaScript模板字面量使用技巧》，就带大家讲解一下知识点，若是你对本文感兴趣，或者是想搞懂其中某个知识点，就请你继续往下看吧~

模板字面量使用反引号包裹，支持嵌入变量和表达式、多行字符串及标签函数。例如：const name = "小明"; const age = 25; const message = 你好，我是${name}，今年${age}岁。; 可直接输出拼接结果；${a + b} 支持运算，${status ? '在线' : '离线'} 支持三元表达式；多行字符串无需转义，保留格式；通过标签函数如highlight可自定义处理逻辑，用于防XSS或国际化等场景。

JavaScript模板字面量是一种强大且直观的字符串处理方式，它让拼接变量、嵌入表达式和编写多行字符串变得更简单。相比传统的字符串拼接方法（如使用+号），模板字面量语法更清晰，可读性更强。

什么是模板字面量

模板字面量使用反引号（`）包裹字符串，而不是单引号或双引号。它支持以下特性：

• 直接在字符串中嵌入变量或表达式，使用{}语法
• 天然支持换行，无需转义字符
• 可以结合标签函数实现自定义处理逻辑

例如：

const name = "小明";
const age = 25;
const message = `你好，我是${name}，今年${age}岁。`;
console.log(message); // 输出：你好，我是小明，今年25岁。

嵌入表达式与逻辑

模板字面量中的${}不仅可以放变量，还能放入任意JavaScript表达式。

const a = 10;
const b = 20;
const result = `两数之和是：${a + b}`; // 支持运算
const status = true;
const display = `用户状态：${status ? '在线' : '离线'}`; // 支持三元运算符

这种能力让动态生成内容变得非常灵活，比如构造HTML片段或日志信息时特别实用。

多行字符串处理

传统字符串无法直接换行，否则会报错。而模板字面量天然支持多行。

const html = `
  <div class="card">
    <h2>标题</h2>
    <p>这是一段描述内容</p>
  </div>
`;

生成的字符串保留了格式中的换行和缩进，适合用于构建结构化文本，如HTML、SQL语句等。

标签模板（Tagged Templates）

模板字面量可以与函数结合，形成“标签模板”，用于自定义解析逻辑。

常见用途包括国际化、防止XSS、样式化输出等。

function highlight(strings, ...values) {
  let result = '';
  strings.forEach((str, i) => {
    result += str;
    if (i ${values[i]}`;
    }
  });
  return result;
}

const user = "Alice";
const text = highlight`欢迎你，${user}！`; 
// 返回：欢迎你，<strong>Alice</strong>！

标签函数接收原始字符串数组和插值部分，可用于精细控制输出结果。

基本上就这些。模板字面量简化了大多数字符串操作场景，写起来更自然，维护也更容易。不复杂但容易忽略的是它的表达能力远超基础拼接，合理使用能让代码更干净。

本篇关于《JavaScript模板字面量实用技巧》的介绍就到此结束啦，但是学无止境，想要了解学习更多关于文章的相关知识，请关注golang学习网公众号！