ES6 中的模板字符串及其使用技巧-JavaScript中文网-JavaScript教程资源分享门户

在 ES6 中，模板字符串是一个强大的新特性，它允许我们在字符串中插入变量、表达式以及多行文字。与传统的字符串连接方法相比，模板字符串提供了更加优雅和易读的方式来处理字符串拼接。

模板字符串语法

ES6 的模板字符串使用反引号 ` 来包含字符串，用 ${ } 包含需要插入的变量或表达式。例如：

const name = "小明";
console.log(`欢迎您，${name}！`);

这段代码将输出：欢迎您，小明！

当然，我们也可以在模板字符串中使用表达式，甚至是函数调用。例如：

const sum = (a, b) => a + b;
console.log(`1 + 2 = ${sum(1, 2)}`);

这段代码将输出：1 + 2 = 3

此外，在模板字符串中还可以嵌套使用模板字符串，形成多层嵌套，以满足复杂的字符串需求。

模板字符串的多行支持

在传统的 JavaScript 字符串中，如果要表示多行文字，必须使用反斜杠 \ 进行转义，如下所示：

const str = "这是一段\
多行\
文字";

而在 ES6 中，由于模板字符串的存在，我们可以直接在字符串中换行，而大括号内的任何内容都会被当做普通文本对待。例如：

const str = `
这是一段
多行
文字`;

模板字面量标签

模板字面量标签是一个用于改变模板字符串输出格式的函数。我们可以在模板字符串前面添加一个函数调用，以修改模板字符串的输出结果。例如：

// javascriptcn.com 代码示例
function myTag(strings, ...values) {
  console.log(strings); // ["现在是", "点"]
  console.log(values); // [9, 30]

  let hour = values[0];
  if (hour < 12) {
    hour += "上午";
  } else {
    hour += "下午";
  }

  return `${strings[0]}${hour}${strings[1]}`;
}

const time = myTag`现在是${9}:${30}点`;
console.log(time); // 现在是9上午:30点

在这个例子中，myTag 函数接收到两个参数 strings 和 values，分别表示模板字符串中所有的文本和值。在 this function 中，我们通过对 values 参数进行处理，将时间输出格式从数字格式改为了类似于 “9上午:30点” 的中文格式。

总结

ES6 中的模板字符串是一个方便、易用、强大的新特性，与传统的字符串连接方法相比，它具有更优雅和可读的语法，支持多行文本，同时也为我们提供了自定义格式的功能。建议开发者尽可能地运用模板字符串，以提高代码的可读性和实用性。

来源：JavaScript中文网，转载请注明来源本文地址：https://www.javascriptcn.com/post/6529112f7d4982a6ebba3685