JavaScript模板字面量_javascript字符串处理-js教程-PHP中文网

JavaScript模板字面量_javascript字符串处理

夜晨

发布： 2025-12-03 15:03:29

原创

250人浏览过

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

javascript模板字面量_javascript字符串处理

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

什么是模板字面量

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

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

例如：

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

登录后复制

嵌入表达式与逻辑

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

立即学习“Java免费学习笔记（深入）”；

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

登录后复制

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

多行字符串处理

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

Fotor AI Face Generator

Fotor 平台的在线 AI 头像生成器

查看详情

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.length) {
      result += `<strong>${values[i]}</strong>`;
    }
  });
  return result;
}

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

登录后复制

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

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

以上就是JavaScript模板字面量_javascript字符串处理的详细内容，更多请关注php中文网其它相关文章！