如何在 JavaScript 中使用模板字符串？

JavaScript模板字符串使用全解析

最新推荐文章于 2025-09-27 10:00:00 发布

原创最新推荐文章于 2025-09-27 10:00:00 发布 · 1.4k 阅读

20 ·

CC 4.0 BY-SA版权

文章标签：

#前端 #开发语言 #javascript #css

JavaScript 问题专栏专栏收录该内容

66 篇文章

订阅专栏

如何在 JavaScript 中使用模板字符串？

模板字符串（Template Strings）是 ES6 引入的一个强大特性，旨在简化字符串拼接的语法和增强可读性。与传统的字符串拼接方法相比，模板字符串提供了更灵活和强大的功能，尤其是在涉及动态内容插入时。

本文将详细讲解模板字符串的使用方法，并结合实际项目代码示例，带你从基础到高级逐步理解模板字符串。

1. 模板字符串的基本语法

模板字符串是由反引号（`）包围的字符串。与传统的单引号或双引号字符串不同，模板字符串可以直接在其中插入表达式。

基本语法

let name = "Alice";
let greeting = `Hello, ${name}!`;
console.log(greeting);  // 输出：Hello, Alice!

代码解析

使用反引号包围字符串。
插入变量或表达式时使用 ${} 包裹表达式。

2. 嵌入变量和表达式

模板字符串的最大优势之一就是可以在字符串中嵌入变量和表达式，甚至是复杂的表达式。这使得动态生成字符串变得非常简便。

示例：插入变量

let firstName = "John";
let lastName = "Doe";
let fullName = `${firstName} ${lastName}`;
console.log(fullName);  // 输出：John Doe

示例：插入表达式

模板字符串不仅可以嵌入变量，还可以插入任何合法的 JavaScript 表达式。

let a = 5;
let b = 3;
let result = `The sum of ${a} and ${b} is ${a + b}.`;
console.log(result);  // 输出：The sum of 5 and 3 is 8.

代码解析

${a + b} 可以执行任何合法的 JavaScript 表达式，并将其结果嵌入字符串中。

3. 多行字符串

在传统的字符串中，我们需要使用 \n 来表示换行，这样非常不方便。而模板字符串允许我们直接编写多行字符串，使得代码更加简洁和易读。

示例：多行字符串

let message = `
Hello, Alice!
Welcome to the platform.
We hope you have a great experience!
`;

console.log(message);

代码解析

使用反引号包围的模板字符串自动支持多行文本，不需要额外的换行符。

4. 使用模板字符串进行函数调用

模板字符串不仅仅能处理基本的插值，还可以通过插入复杂的函数调用或操作来增强动态生成字符串的能力。

示例：函数调用

function formatPrice(price) {
  return `$${price.toFixed(2)}`;
}

let price = 5.5678;
let formattedPrice = `The price is ${formatPrice(price)}.`;
console.log(formattedPrice);  // 输出：The price is $5.57.

代码解析

模板字符串中嵌入了 formatPrice(price) 函数调用，结果是将格式化后的价格插入到字符串中。

5. 标签模板

标签模板是模板字符串的一个进阶用法。通过在模板字符串前面添加一个“标签”函数，开发者可以完全控制模板字符串的处理方式。标签模板允许你在插入表达式时进行更多自定义操作。

示例：标签模板

function highlight(strings, ...values) {
  let result = strings[0];
  values.forEach((value, index) => {
    result += `<strong>${value}</strong>` + strings[index + 1];
  });
  return result;
}

let name = "Alice";
let age = 25;
let message = highlight`Hello, ${name}. You are ${age} years old.`;
console.log(message);
// 输出：Hello, <strong>Alice</strong>. You are <strong>25</strong> years old.

代码解析

highlight 是一个标签模板函数，它接收模板字符串的静态部分（strings）和动态插入的值（values）。
该标签函数将动态值用 HTML 标签包裹，使得输出的字符串带有格式化效果。

6. 实际项目中的应用示例

在实际开发中，模板字符串常常用于生成动态内容、构建 HTML 结构或进行 URL 构建等场景。以下是一个实际项目中的例子：

示例：生成用户资料卡片的 HTML

function generateProfileCard(user) {
  return `
    <div class="profile-card">
      <h2>${user.name}</h2>
      <p>Age: ${user.age}</p>
      <p>Email: ${user.email}</p>
      <p>Location: ${user.location}</p>
    </div>
  `;
}

let user = {
  name: "John Doe",
  age: 30,
  email: "john.doe@example.com",
  location: "New York"
};

let profileCardHTML = generateProfileCard(user);
document.body.innerHTML = profileCardHTML;