Javascript箭头函数说明[重复]答案

【问题标题】：Javascript Arrow Function Explanation [duplicate]Javascript箭头函数说明[重复]
【发布时间】：2023-03-08 19:24:01
【问题描述】：

您好 Stack Overflow 社区，谁能解释一下这段代码？

// Create a function that returns HTML with data
const myBox = (title, description) =>
`<div class="box"><h3>${title}</h3><div>${description}</div></div>`;

我了解它的基本功能，但我无法理解<div> 和${title} 和${description} 部分周围的``。

如果有人可以帮助我，我会非常高兴。谢谢。

【问题讨论】：

这个函数返回一个template string。 developer.mozilla.org/de/docs/Web/JavaScript/Reference/…

标签： javascript function arrow-functions

【解决方案1】：

这里发生的事情很少。

Here 是有关箭头函数的一些文档。在文档中，您将看到如果没有正文块，它们将如何自动返回值。如果像这样包含正文块，则需要包含 return 语句。

var func = x => x * x;                  
// concise syntax, implied "return"

var func = (x, y) => { return x + y; }; 
// with block body, explicit "return" needed

现在，这里返回的是什么？

`<div class="box"><h3>${title}</h3><div>${description}</div></div>`;

这是每个人在其他答案中都在谈论的字符串文字。我相信我不需要多说。

所以这段代码是一个返回字符串的函数。我猜这是 React 代码或类似的东西。它将调用此函数获取字符串并使用返回的内容创建 DOM 元素。

【讨论】：

【解决方案2】：

是Template Literals，与箭头函数无关。

以MDN文档为例：

var a = 5;
var b = 10;
console.log('Fifteen is ' + (a + b) + ' and\nnot ' + (2 * a + b) + '.');

这等于

var a = 5;
var b = 10;
console.log(`Fifteen is ${a + b} and
not ${2 * a + b}.`);

【讨论】：

【解决方案3】：

那些被称为Template Literals。它们允许您拥有多行字符串，并允许您使用 ${expression} 插入表达式，并且该表达式的结果将插入到字符串中的该点。

【讨论】：