打印模板文字中的箭头函数答案

【问题标题】：arrow function in template literals is printed打印模板文字中的箭头函数
【发布时间】：2017-12-20 07:08:23
【问题描述】：

在名为“Car”的函数中，我添加了一个方法“beep”，并带有可选的消息输入：

this.beep = function (message) { }

我想使用模板文字来在函数中记录这个：

console.log(this.name + ': ' + 'Beeeeep!' + (message ? ' ' + message : ''))

我写了以下内容，但输出显示了文字本身的内容：

console.log(`${this.name}: Beeeeep! ${ (message) => {
  if (message) return `${message}`;
    return ' ';
  }}`);

输出（对于 this.name='myCar'）：

myCar: Beeeeep! (message) => {
    if (message) return `${message}`;
    return '';
  }

为什么它记录文字的内容而不是转译它？

*我想出了如何以更简单的方式编写它：

console.log(`${this.name}: Beeeeep! ${message || ''}`)

但我还是想了解第一个代码出了什么问题。

【问题讨论】：

【解决方案1】：

发生这种情况是因为您将函数的主体和定义传递给模板文字字符串。如果您希望函数的结果显示在字符串中，则应同时使用和调用该函数，除非它将作为包含该函数主体的字符串传递。为此，您可以使用 IIFE。

console.log(`${this.name}: Beeeeep! ${((message) => {
  if (message) return `${message}`;
  return ' ';
})()}`);

【讨论】：

【解决方案2】：

我相信这是因为您的实现只定义了一个函数，所以模板文字会打印函数本身。

要打印函数的输出，所以需要调用箭头函数。我已将您的函数更改为使用三元运算符，并使用 IIFE 来调用该函数，以便根据需要打印其输出。

console.log(`${this.name}: Beeeeep!  ${((message) =&gt; message ? message : ' ')('Test')}`);

【讨论】：