模板字符串 vs 普通字符串：核心区别与使用场景

ttod_qzstudio

已于 2025-01-22 08:09:24 修改

阅读量454

点赞数 6

分类专栏： JavaScript 文章标签： JavaScript

于 2025-01-21 14:26:48 首次发布

本文链接：https://blog.youkuaiyun.com/ttod/article/details/145282847

版权

JavaScript 专栏收录该内容

14 篇文章

订阅专栏

在 JavaScript 中，字符串是开发中最常用的数据类型之一。ES6 引入了模板字符串（Template Literals），为字符串处理带来了更多便利和功能。本文将详细介绍模板字符串与普通字符串的核心区别，并探讨它们的使用场景。

1. 定义方式

普通字符串

普通字符串可以使用单引号（'）或双引号（"）定义。

const str1 = '这是一个普通字符串';
const str2 = "这也是一个普通字符串";

模板字符串

模板字符串使用反引号（`）定义，就是一般键盘上左上角阿拉伯数字键(1)左侧那个键对应的字符。

const str = `这是一个模板字符串`;

2. 多行字符串

普通字符串

普通字符串不支持直接换行。如果需要在字符串中换行，必须使用 `\n` 或字符串拼接。

const str = '这是第一行\n这是第二行';
console.log(str);
// 输出：
// 这是第一行
// 这是第二行

模板字符串

模板字符串支持直接换行，无需使用 `\n`。

const str = `这是第一行
这是第二行`;
console.log(str);
// 输出：
// 这是第一行
// 这是第二行

3. 嵌入变量或表达式

普通字符串

普通字符串不支持直接嵌入变量或表达式，必须通过字符串拼接实现。

const name = "Alice";
const age = 25;
const str = "我的名字是 " + name + "，我今年 " + age + " 岁。";
console.log(str); // 输出：我的名字是 Alice，我今年 25 岁。

模板字符串

模板字符串支持通过 `${}` 语法嵌入变量或表达式。

const name = "Alice";
const age = 25;
const str = `我的名字是 ${name}，我今年 ${age} 岁。`;
console.log(str); // 输出：我的名字是 Alice，我今年 25 岁。

4. 标签函数（Tagged Templates）

普通字符串

普通字符串不支持标签函数。

模板字符串

模板字符串可以与标签函数结合使用，实现更复杂的字符串处理。

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

const name = "Alice";
const age = 25;
const str = highlight`我的名字是 ${name}，我今年 ${age} 岁。`;
console.log(str); // 输出：我的名字是 <strong>Alice</strong>，我今年 <strong>25</strong> 岁。