ES12 中的 template 字符串：使用多行字符的新方式

ES12 中的 template 字符串：使用多行字符的新方式

模板字符串是一种新的字符串语法，它可以处理多行、字符串插值、标记模板和内联表达式等。ES12 中的模板字符串增加了多行字符串的新方式，允许开发者使用多行字符串而不必在字符串中使用转义符 \n。

多行字符串

要在 ES6 中使用多行字符串，必须在字符串中使用换行符 \n。例如：

const str = "这是一个\n多行字符串";
console.log(str);

ES12 中的模板字符串通过使用两个反引号来创建多行字符串，例如：

const str = `这是一个
多行字符串`;
console.log(str);

这种语法使得多行字符串变得更加直观和易于维护。

模板字符串的插值

模板字符串允许在字符串中插入变量或表达式的值。要插入变量或表达式的值，请在字符串中使用 ${}。例如：

const name = "小明";
const age = 18;
const str = `我的名字叫${name}，年龄是${age}岁。`;
console.log(str);

这将输出：我的名字叫小明，年龄是18岁。

在插值表达式中也可以使用函数调用、三元运算符等。

标记模板

在标记模板中，使用自定义的函数来处理模板字符串，并返回最终的字符串结果。标记模板在 React 和其他库中得到广泛应用。例如：

function html(strings, ...values) {
  let result = "";
  for (let i = 0; i < strings.length; i++) {
    result += strings[i];
    if (i < values.length) {
      result += values[i];
    }
  }
  return result;
}

const name = "小明";
const age = 18;
const str = html`<p>我的名字叫${name}，年龄是${age}岁。</p>`;
console.log(str);

这将输出：

我的名字叫小明，年龄是18岁。

总结

ES12 中的模板字符串是一种强大的字符串语法，可以处理多行、字符串插值、标记模板和内联表达式等。多行字符串使得代码更加清晰、易于维护，模板字符串的插值和标记模板功能为前端开发带来了更加便捷的编程体验。

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