JavaScript 字符串插值

Question

JavaScript 模板文字 支持字符串插值。 例如，假设你想实现一个函数 greet() 对给定的人说 你好 name. 你实施 greet() 使用 字符串连接 ：

function greet(name) {
  return 'Hello ' + name + '!';
}

但是，如果您想将多个变量插入到字符串中，这种方法可能会变得混乱。 您可以改为使用模板文字，这是声明字符串的另一种语法。 模板文字使用反引号 ` 括起来：

function greet(name) {
  return `Hello ${name}!`;
}

const str = greet('World');
typeof str; // "string"
str; // "Hello World!"

这 ${name} 字符串的一部分称为 占位符 。 您可以将任何 JavaScript 表达式 放在占位符中，例如函数调用：

function capitalize(name) {
  return `${name.slice(0, 1).toUpperCase()}${name.slice(1)}`;
}

function greet(name) {
  return `Hello ${capitalize(name)}!`;
}

const str = greet('wOrLd');
typeof str; // "string"
str; // "Hello World!"

使用自定义类

请记住，JavaScript 表达式的计算结果是一个值。 如果您的占位符表达式计算结果为非 null 对象，JavaScript 将尝试调用该对象的 toString()函数 将其转换为字符串。

以下是 JavaScript 如何处理占位符中的对象：

class User {
  constructor(name) {
    this.name = name;
  }

  toString() {
    return this.name;
  }
}

const user = new User('Bill');

const str = `Hello ${user}!`; // "Hello Bill!"

错误案例

如果占位符表达式的计算结果为，则模板文字不会引发错误 null 或者 undefined。

`Hello ${null}!`; // "Hello null!"
`Hello ${void 0}!`; // "Hello undefined!"

字符串插值可能引发运行时错误的唯一情况是，如果您的占位符表达式计算为一个对象，其 toString() 函数抛出错误。 例如， JavaScript 符号 转换为字符串时，它们会引发错误：

const sym = Symbol('test symbol');
// Throws "TypeError: Cannot convert a Symbol value to a string"
const str = `Hello ${sym}!`;