ECMAScript 2021 中的模板字符串-JavaScript中文网-JavaScript教程资源分享门户

随着前端技术的迅猛发展，ECMAScript (简称 ES) 成为了前端开发中不可或缺的一部分。ES 在每年的更新中都会加入新的特性，其中模板字符串 (Template String) 是 ES6 中引入的一项重要特性。而在 ES2021 中，模板字符串的功能也得到了进一步的增强和优化。

本文将重点介绍 ECMAScript 2021 中的模板字符串，包括其语法、用法、优点以及示例代码等内容，希望能够对前端开发人员有所帮助。

模板字符串的语法

在 ES 中，使用一对反引号 ` ` 来创建模板字符串，同时可以在其中通过 ${ } 的方式插入变量和表达式。例如：

const name = "Peter";
const age = 18;
const message = `欢迎您，${name}先生/女士！您已经${age}岁了！`;
console.log(message); // 输出: 欢迎您，Peter先生/女士！您已经18岁了！

需要注意的是，如果要在模板字符串中包含反引号本身，需要使用转义字符进行处理，例如：

const str = `\`I'm fine.\``;
console.log(str); // 输出: `I'm fine.`

模板字符串的用法

多行字符串

在传统的 JavaScript 中，如果需要创建一个多行字符串，需要在每行末尾添加一个反斜杠作为续行符，例如：

const text = "这是一段\n" +
            "多行文本\n" +
            "的示例代码";
console.log(text);

而在模板字符串中，则可以直接使用换行符来插入多行文本：

const text = `这是一段
多行文本
的示例代码`;
console.log(text);

嵌套模板字符串

模板字符串和普通字符串可以相互嵌套使用：

const str = `这是外层字符串，包含了${`内层字符串 ${name}`}`;
console.log(str); // 输出: 这是外层字符串，包含了内层字符串 Peter

标签模板

标签模板 (Tagged Template) 是指将模板字符串作为参数传递给一个函数，由这个函数来处理字符串，并返回最终结果的一种技术。这种技术可用于字符串的转义、国际化、编译等方面。

function myTag(strings, ...vars) {
    console.log(strings);
    console.log(vars);
}

const name = "Peter";
const age = 18;
myTag`欢迎您，${name}先生/女士！您已经${age}岁了！`;

上述代码中，myTag 函数被使用作为模板字符串的标签，字符串部分将会被分割成一个数组 strings，变量部分则会被展开成一个数组 vars，并和 strings 数组对应。在本例中，myTag 函数将会输出如下内容：

[ '欢迎您，', '先生/女士！您已经', '岁了！' ]
[ 'Peter', 18 ]

标签模板可以用于自定义字符串处理函数，从而实现更加灵活的字符串操作。

模板字符串的优点

相比传统的字符串拼接方式，模板字符串具有以下优点：

变量插入更加方便，无需使用 + 符号来连接字符串和变量，直接使用 ${ } 语法即可；
可以插入换行符、空格等空白字符，让字符串排版更加直观美观；
模板字符串更加易读易写，语义化更强。

示例代码

以下是一些使用模板字符串的示例代码：

生成 HTML 标签

-- -------------------- ---- -------
-------- ------------- -------- -
    --- ------ - -----------
    ------------------ ------ -- -
        ------ -- --------------- - ------------- - ---
    ---
    ------ -------
-

-------- --------------- -
    ------ ----------------------- --------------- -
        ------ ------- -
            ---- ----
                ------ --------
            ---- ----
                ------ -------
            ---- ----
                ------ -------
            ---- -----
                ------ ---------
            ---- ----
                ------ --------
        -
    ---
-

----- ----- - ------- --------
----- ------- - ----- -- - ---- --- -------- ---------
----- ------- - -----
    ---- ----------------
        -----------------
        -----------------
    ------
--

---------------------

生成多语言字符串

-- -------------------- ---- -------
----- -------- - -
    ----- -
        -------- ------- ---------
        ---------- -------- -- --- -------- --------
    --
    -------- -
        -------- -------------
        ---------- -------------------
    -
--

-------- ---------- -------- -
    ----- -------- - -------- -- --------------
    --- ------ - -----------
    ------------------ ------ -- -
        ------ -- ----------------------- - ------------- - ---
    ---
    ------ -------
-

----- -------- - --------
----- -------- - --------------------- -- -- - -----------
----- ---------- - -----------------------
---------------------- -- --- ---------
------------------------ -- --- ----------------

总结

本文详细介绍了 ECMAScript 2021 中的模板字符串，包括其语法、用法、优点以及示例代码等内容。相信通过本文的学习，读者可以更加熟练地掌握模板字符串的使用方法，从而提高工作效率和代码质量。

来源：JavaScript中文网，转载请注明来源 https://www.javascriptcn.com/post/646e0c44968c7c53b0ca3b72