ES6 新特性之字符串模板-JavaScript中文网-JavaScript教程资源分享门户

在 ES6 中，一个非常有用的新特性是字符串模板 (Template Strings)，也被称为模板字面量 (Template Literals)。这个新特性让我们在书写字符串时，可以更加方便、直观、自然地表达出我们要传递的值，解决了在以前使用字符串时需要拼接的问题。

传统字符串使用的问题

在 JavaScript 语言中，我们常常需要使用字符串，以实现各种不同的功能，如字符串拼接、输出调试信息等等。这时我们通常会使用引号把内容包裹起来，这样 JavaScript 引擎就会将其识别为一个字符串。比如：

var name = "张三";
console.log("你好," + name + "！");

这段代码的输出结果是：

你好，张三！

我们可以发现，在使用字符串拼接时，需要在每个变量之间添加 '+' 号，这样会造成代码整洁性问题和不易理解问题。

ES6 字符串模板是针对字符串拼接问题的一种解决方案。我们可以使用反引号 (``) 来创建一个字符串模板，其中可以包括一些变量、表达式等等。

下面的代码示例中演示了如何使用字符串模板来拼接一个完整的句子：

let name = "张三";
let age = 18;
let sentence = `大家好，我叫 ${name}，今年 ${age} 岁了。`;
console.log(sentence);

输出结果：

大家好，我叫 张三，今年 18 岁了。

使用字符串模板，我们将变量放入一对 ${} 中间，就可以将其转化为字符串拼接。这样不仅代码可读性更好，而且还可以避免拼接过程中可能会遇到的类型转换问题。

和字符串拼接一样，字符串模板也可以包含一些表达式。比如，我们可以使用模板表达式来计算一个数学表达式的结果，并将其输出。

let a = 2;
let b = 3;
let sum = ` ${a} + ${b} = ${a + b} `;
console.log(sum);

输出结果：

2 + 3 = 5

在以前，我们要创建多行字符串时需要使用转义符 '\n' 来进行分行。而使用字符串模板可以更加方便地创建多行字符串。比如：

let text = `
  JavaScript 语言
  是一种跨平台的脚本语言
  它是唯一一种能够在浏览器端和服务器端运行的脚本语言。
`;
console.log(text);

输出结果：

  JavaScript 语言
  是一种跨平台的脚本语言
  它是唯一一种能够在浏览器端和服务器端运行的脚本语言。

多行字符串中的空白符 (空格、制表符) 和换行符不会被忽略，而是原样保留到字符串中。

在 ES6 中，字符串模板是一个非常实用的特性，能够解决传统字符串在拼接及可读性方面的问题。为了编写更高效、简洁、易读的代码，我们应该更多地使用这个特性。

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