Javascript 箭头函数说明

Question

Hello Stack Overflow Community， 谁能解释我这段代码？

// 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}部分的"。

如果有人能帮助我，我会很高兴。 谢谢。

Answer 1

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

Answer 2

它是模板文字，它与箭头函数无关。

如示例，在 MDN 文档中显示：

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

等于

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

Answer 3

这里发生的事情很少。

以下是有关箭头函数的一些文档。在文档中，您将看到如果没有正文块，它们将如何自动返回值。如果像这样包含正文块，则需要包含 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 元素。