Question

Hello 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}部分。

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

Answer 1

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

Answer 2

它是模板文字，它与箭头功能无关。

作为示例，在显示的MDN文档中：

＆＃13;

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

＆＃13;

＆＃13; 等于

＆＃13;

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

＆＃13;

Answer 3

这里发生的事情很少。

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元素。

Javascript箭头功能说明

3 个答案: