ECMAScript2016 中字符串模板 (template string) 的使用

在 ECMAScript2016 中，JavaScript 引入了字符串模板 (template string) 的概念，可以更加方便地处理字符串，包括变量的插入、换行符的处理等。本文将介绍字符串模板的基本语法、用法以及相关注意事项，并提供示例代码。

基本语法

字符串模板使用反引号 ` 包裹字符串，在字符串中可以使用美元符号和花括号来插入变量：

const name = 'JavaScript';
console.log(`Hello, ${name}!`);

输出结果为：

Hello, JavaScript!

变量插入

使用字符串模板时，可以在模板字符串中插入变量，使用方式如下：

const name = 'JavaScript';
console.log(`Hello, ${name}!`);

在模板字符串中使用 ${变量名} 的方式来插入变量，变量名可以是任意合法的 JavaScript 变量名，并且可以是任意类型的值。

如果需要在模板字符串中使用美元符号本身，需要使用反斜杠进行转义：

const price = 9.99;
console.log(`The price is $${price.toFixed(2)}`);

输出结果为：

The price is $9.99

多行字符串

在 ECMAScript2016 之前，JavaScript 中的字符串通常都是单行的，如果需要表示多行字符串，常常需要使用反斜杠进行转义，或者使用连接符 + 拼接多个字符串。而现在，在使用反引号包裹的字符串中，可以直接使用多行字符串，示例如下：

const message = `This is a
multi-line
string`;
console.log(message);

输出结果为：

This is a
multi-line
string

嵌套模板

字符串模板还支持嵌套模板，可以在模板字符串中嵌套其他模板字符串，示例如下：

const name = 'JavaScript';
const message = `Hello, ${name.toUpperCase()}!
Today is ${new Date().toLocaleDateString()}.
`;
console.log(message);

输出结果为：

Hello, JAVASCRIPT!
Today is 11/4/2021.

内嵌表达式

除了变量插入之外，字符串模板还支持内嵌表达式，可以在模板字符串中使用任意 JavaScript 代码，示例如下：

const name = 'JavaScript';
const message = `Hello${
  name === 'JavaScript' ? ', World' : ''
}!`;
console.log(message);

输出结果为：

Hello, World!

注意事项

• 字符串模板只支持反引号 ` 标记，不支持单引号或双引号；
• 使用字符串模板可以更加方便地处理字符串，但也需要注意在字符串中嵌入 JavaScript 代码时，要注意代码的合法性以及安全性；
• 在使用字符串模板时，需要注意浏览器的兼容性问题，尤其是在较旧的浏览器版本中可能不支持字符串模板的语法。

总结

字符串模板（template string）是 ECMAScript2016 中引入的一个新特性，它可以更加方便地处理字符串，包括变量的插入、换行符的处理等。本文介绍了字符串模板的基本语法、用法以及相关注意事项，并提供了示例代码。在实际开发中，我们可以使用字符串模板来简化代码、提高开发效率。

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