问题描述
我刚刚阅读了 the changes in d6.js version 6 并偶然发现了 this d3.groups() example on observablehq.com。
在那里,我看到了以下代码片段,用于从 Map
athletesBySport
创建一个 HTML 表:
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 的脚本的标志。
解决方法
可以在here,in Observable's standard library找到这个问题的答案。 This introduction 还探索了标准库。
html`...`
part 是“只是”一个 JavaScript tagged template literal,即使用特定方法解析的 JavaScript 模板文字。
来自 Observable 的文档:
html`字符串`
返回由指定的 HTML 字符串文字表示的 HTML 元素。此函数旨在用作标记模板文字。自动修剪前导和尾随空格。例如,要创建一个内容为“Hello,world!”的 H1 元素: html`
你好,世界!`
文档进一步说明了如何处理嵌入 $
的表达式:
如果嵌入的表达式是一个 DOM 元素,它就会嵌入到生成的 HTML 中。例如,要在 HTML 中嵌入 TeX:
html`我喜欢 ${tex`\KaTeX`} 数学。`
如果嵌入的表达式是数组,则数组的元素会嵌入到生成的 HTML 中。