用 DT 包绘制表格时怎样在一列数据中插入图片？

yuanfan

俺最近打算学习一下 DT 包，学习方法就是照着 reactable 包的demo用 DT 复现出来，但是一直没琢磨出来怎么往一列数据中插入图片。基本思路是用JS()调 Javascript 调 html 来实现，但是失败了。

reactable demo 代码

需要插入的图片位置：https://github.com/glin/reactable/tree/main/vignettes/womens-world-cup

```{r}
forecasts <- data.frame(
  team = c(
'USA',	'France',	'Germany',	'Canada',	'England',	'Netherlands',	'Australia',	'Sweden',	'Japan',	'Brazil',	'Spain',	'Norway',	'China',	'Italy',	'New Zealand',	'Nigeria',	'Cameroon',	'South Korea',	'Scotland',	'Argentina',	'Chile',	'South Africa',	'Thailand',	'Jamaica'),
  points = c(
   '6',	'6',	'6',	'6',	'6',	'6',	'3',	'6',	'4',	'3',	'3',	'3',	'3',	'6',	'0',	'3',	'0',	'0',	'0',	'1',	'0',	'0',	'0',	'0'))

library(reactable)
library(htmltools)

reactable(forecasts,
          columns = list(
            team = colDef(
              defaultSortOrder = "asc",
              minWidth = 200,
              headerStyle = list(fontWeight = 700),
              cell = function(value, index) {
                div(img(
                  alt = paste(value, "flag"),
                  src = sprintf("images/%s.png", value)
                ),
                div(value),
                div(sprintf("%s pts.", forecasts[index, "points"])))
              }
            ),
            points = colDef(show = FALSE)
          ))
```

JS()里面为撒要插入反斜杠`\`

因为主要解题思路是使用回调函数，但又对 Javascript 不熟，所以问题也没解开，回调函数也不会写。在实现“插入图片”之前，想的是先照着网上的原生js代码搬到R里面实现试试，但是也失败楽。

DT 网站搬来的代码

'<span title=\"' + data + '\">'这里为撒要加上反斜杠符号呢？

```{r}
library(DT)
library(htmlwidgets)

DT::datatable(forecasts,
              rownames = FALSE,
              options = list(columnDefs = list(list(
                targets = 0,
                render = JS(
                  "function(data, type, row, meta) {
                  return type === 'display' && data.length > 6 ?
                  '<span title=\"' + data + '\">' + data.substr(0, 6) + '...</span>':data;
                  }"
                )
              ))))
```

照着原生js搬的代码

网上找的 DT 包对应的 DataTables 的代码https://www.jianshu.com/p/579e6664c226，比如第一个例子中的checkbox，搬到R里面，会报错，"function(data, type, row, meta) {这一行报的错是“expected ',' after expression”，执行后会报如下错。难道在JS()里面写类似<input />或者<img />之类的 html 元素时需要在哪里加上反斜杠才正常吗？

Error: unexpected symbol in:" "function(data, type, row, meta) { return '<input type="checkbox"

```{r}
DT::datatable(forecasts[, c('team', 'points', 'group')],
              rownames = FALSE,
              options = list(columnDefs = list(list(
                targets = 0,
                render = JS(
                  "function(data, type, row, meta) {
                  return '<input type="checkbox" name="checklist" value="'+ row.name + '"/>'
                  }"
                )
              ))))
```

Cloud2016

yuanfan JS 里面的反斜杠 \ 是用来转义的，在正则表达式里也常常遇见。

yihui

yuanfan '<span title=\"' + data + '\">'这里为撒要加上反斜杠符号呢？

因为外面有一层双引号，里面不加反斜杠的话，它就不是合法的 R 字符串了。即：

JS("'<span title="' + data + '">'")

这不是合法的 R 语法。R 会以为第一个双引号引的字符串结束于 title=，但接下来下一个字符是单引号、开启新的字符串，那就不合语法了（你不能把两个字符串直接写在一起，中间没有任何操作符）。

JS("'<span title=\"' + data + '\">'")

这才是合法的。中间的双引号转义是为了告诉 R，这里我就是需要双引号字符本身，而不是用双引号来引字符串。

为了避免这些会戳瞎眼睛（还很伤脑）的反斜杠，最方便的办法是把你想写的字符串写在 r"( )" 的括号里，那样就不用转义了，比如：

r"('<span title="' + data + '">')"

如果碰巧你想写的字符串中有 )" 这两个字符，那么你可以把圆括号换成方括号 [] 或大括号 {}。如果你想写的字符串中碰巧有这些回括号加双引号（真是狗屎运啊），那么还有最后的克服办法，就是在双引号与括号之间加上任意数量的横杠，只要双引号加这些横杠加括号这个字符串不在你要写的字符串中出现。比如：

r"-----(回括号加引号)"是可以出现的)-----"
r"(而这是不行的)")"

解释转义的概念太累人了，尤其是用一种语言（比如 R）输出另一种语言（比如 JS）的字符串时，更是烧脑。

yuanfan

Cloud2016
搜嘎。
我一直以为两个反斜杠符号才是用来转义的。

Cloud2016

yuanfan 关于插入图片在表格的格子里，SO 上有一些例子

yuanfan

话说为撒要转义呢？我看一般情况下如https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/Input/checkbox，都是没有反斜杠的。感觉要召唤一下益辉大神了，@yihui 哪天有空的话，请您帮忙看看呐。

yuanfan

Cloud2016
讲真，我每次都特别特别佩服你找资料的速度。俺周末看看。

meeeeeeeeo

yihui 最方便的办法是把你想写的字符串写在 r"( )" 的括号里

话说哪里可以找到 r"( )" 的帮助文档，有时候也会遇到转义的问题，但是第一次见到这种方法。。。

yuanfan

yihui
原来大神觉得解释起来很累人啊，不过我看明白了。为表感谢，在这炎炎夏日，口头上供一个又大又甜的无籽西瓜给你，顺道再去去年口头种菜的菜园子里揪点辣椒、摘几颗西红柿一并奉上。
虽说加反斜杠是为了转义双引号，但是如<input type="submit" value="Submit" />，我原本一直迷惑的是怎么 html 里面的参数都是用空格来分隔的，像 R 里面都是各种小括号、逗号，JS 里面都是各种大括号、中括号、分号，只要双引号能转义，那个空格不用管么？

yihui

meeeeeeeeo 在帮助文档 ?Quotes 中。你第一次见不奇怪，因为这是新语法，R 4.X 中加入的（具体是四点几我忘了，得查 R 的更新记录），估计也没多少人知道，大多数人应该都被反斜杠的转义符戳了很多年了，而我也一样是解释这种字符串中的反斜杠问题早就解释累了，终于盼来了救命稻草，然而还是有个小坑需要解释。

yihui

yuanfan 只要双引号能转义，那个空格不用管么？

我不确定我是否看懂了你的问题。对 HTML 标签，其属性确实是用空格分隔的；空格是必须的，不能不管，只是在上面的问题里，空格不会引起麻烦，不需要转义。标签属性中的引号之所以会引起麻烦，是因为最外面还有一层引号，所以内部的引号需要转义才能被保留下来。引号引引号需要特殊处理，引号引空格不需要任何特殊操作。不知道这有没有回答你的问题。

yuanfan 原来大神觉得解释起来很累人啊

其实还有个累人的地方是单双引号的规则：单引号可以引双引号，双引号可以引单引号，这两种情况下引号都不需要转义，只有单引单或双引双时需要转义。感受下：

"'单引号'是可以的"
'"双引号"是可以的'
'单引号内的单引号'不转义是不行的'
"双引号内的双引号"不转义是不行的"
"'单引号'不必转义但\"双引号\"需要"

更可怕的情况是当你需要反斜杠字符本身时，动不动就需要八道杠，我自己都很难保证能一口气写对杠的数量。

JS("const x = \"我需要一个反斜杠\\\\\";")

这个例子里，五道杠的第五道是为了转义双引号，前面需要四道是为了产生两个反斜杠，这两个反斜杠到了 JavaScript 代码里之后，第一个反斜杠是为了转义第二个，最终的结果是在 JavaScript 里生成一个反斜杠字符。当反斜杠和引号混战时，就很容易一团浆糊。上面说的 r"( )" 语法在写字符串时不需要转义符，能稍微减轻一点眩晕程度。