JavaScript 模板文字 - Javascript 初学者指南（第 6 部分）

Q shen

已于 2023-06-10 13:39:31 修改

阅读量125

点赞数

分类专栏： Javascript 初学者指南（6 部分系列）文章标签： javascript 前端开发语言

于 2023-04-24 09:57:33 首次发布

本文链接：https://blog.csdn.net/qq_52010446/article/details/130336226

版权

Javascript 初学者指南（6 部分系列）专栏收录该内容

6 篇文章 0 订阅

订阅专栏

方法
你有没有发现自己在 JavaScript 中拼接字符串很费劲？您是否因为不得不使用笨拙的语法和多行来创建一个简单的字符串而感到沮丧？好吧，不要害怕！JavaScript 模板字面量来拯救这一天！

这些是什么？
JavaScript 模板文字，也称为模板字符串，是一种在 JavaScript 中处理字符串的新方法。它们是在 ECMAScript 6 中引入的，并且由于其易用性和灵活性而迅速流行起来。

特征
Template Literals 提供了几个特性，使它们成为传统字符串连接的绝佳替代品。首先，它们允许字符串插值，这意味着您可以将变量直接嵌入到字符串中。它们还允许多行字符串，这意味着您可以创建跨越多行的字符串，而不必使用 \n 字符。最后，他们提供了 Tagged Template Literals，它允许您创建可以处理模板文字的自定义函数。

字符串插值
Template Literals 最有用的功能之一是字符串插值。使用字符串插值，您可以通过将变量包装在 ${} 中来将变量直接嵌入到字符串中。例如：

const name = "John";
const message = `Hello, ${name}!`;
console.log(message); // Output: "Hello, John!"

在此示例中，使用字符串插值将变量name直接嵌入到字符串中。这使得代码比传统的字符串连接更容易阅读和理解。

多行字符串
Template Literals 的另一个重要特性是能够创建多行字符串。使用传统的字符串连接，您必须使用 \n 字符来创建跨多行的字符串。例如：

const message = "This is a multi-line\nstring.";
console.log(message); // Output: "This is a multi-line\nstring."

使用模板文字，您可以创建多行字符串而无需使用 \n 字符。例如：

const message = `This is a
multi-line
string.`;
console.log(message); // Output: "This is a\nmulti-line\nstring."

如您所见，代码使用模板文字更容易阅读和理解。

标记的模板文字
最后，Template Literals 提供了 Tagged Template Literals，它允许您创建可以处理模板文字的自定义函数。例如：

function tag(strings, ...values) {
  console.log(strings); // Output: ["Hello, ", "!"]
  console.log(values); // Output: ["John"]
  return `${strings[0]}${values[0]}${strings[1]}`;
}

const name = "John";
const message = tag`Hello, ${name}!`;
console.log(message); // Output: "Hello, John!"