3

我刚刚阅读了d6.js 版本 6 中的更改，并在 observablehq.com 上偶然发现了这个 d3.groups() 示例。

在那里，我看到了以下代码片段，用于从以下位置创建 HTML 表Map athletesBySport：

html`<table>
  <thead>
    <tr><th>Sport</th><th>Athletes</th></tr>
  </thead>
  <tbody>${Array.from(athletesBySport, ([key, values]) => html`
    <tr>
      <td>${key}</td>
      <td>${values.map(d => d.name).join(", ")}</td>
    </tr>`)}</tbody>
</table>`

这是什么样的“标记”/ HTML 处理？我可以检测到的一些特殊模式是

hmtl`...`

和

$

似乎允许执行生成内联 html 的脚本的标志。

4

1 回答 1

3

这个问题的答案可以在 Observable 的标准库中找到。本介绍还探讨了标准库。

这

html`...`

部分“只是”一个JavaScript标记的模板文字，即用特定方法解析的 JavaScript 模板文字。

从 Observable 的文档中：

html`字符串`

返回由指定的 HTML 字符串文字表示的 HTML 元素。此函数旨在用作标记模板文字。前导和尾随空格会自动修剪。例如，要创建一个内容为“Hello, world!”的 H1 元素： html`<h1>Hello, world!`

该文档进一步说明了如何处理嵌入的表达式$：

如果嵌入的表达式是 DOM 元素，它会嵌入到生成的 HTML 中。例如，在 HTML 中嵌入 TeX：

html`我喜欢 ${tex`\KaTeX`} 用于数学。`

如果嵌入的表达式是一个数组，则该数组的元素会嵌入到生成的 HTML 中。

Observable 中有更多可用的标记文字，例如svg，md用于降价，tex用于 LaTex 等等。

于 2021-01-22T14:37:09.177 回答