为什么我在使用map和ES6模板的html输出的开头得到

Question

map返回一个数组但是

我明白了

,
a
b

而不是预期的

a,
b,

let names = ["a", "b"];
template = `<table>
          ${names.map(name => `<TR><TD>${name}</TD></TR>`)}
          </table>
          `
let div = document.getElementById("container");
div.innerHTML = template;

<div id="container">
</div>

Answer 1

因为map返回一个数组,并且模板将其转换为字符串,这意味着您可以在它们之间使用逗号获取数组条目.结果是:

<TR><TD>a</TD></TR>,
<TR><TD>b</TD></TR>

注意

1. 只有一个逗号(你说你期待两个逗号,但Array#toString调用Array#join只在元素之间放置逗号,而不是在开头或结尾).
2. 逗号位于行之间(这是无效标记).当你这样做时,由浏览器决定如何最好地处理它.有些人通过收集所有无效标记并将其放在表格之前来处理它.其他人把它放在桌子后面.如果您在桌面前看到逗号,则表示您使用的是浏览器(如Chrome).

静态示例:

<table>
  <tbody>
    <TR><TD>a</TD></TR>,
    <TR><TD>b</TD></TR>
  </tbody>
</table>

底线:用于.join("")完全摆脱逗号:

let names = ["a", "b"];
template = `<table>
          ${names.map(name => `<TR><TD>${name}</TD></TR>`).join("")}
          </table>
          `
let div = document.getElementById("container");
div.innerHTML = template;

<div id="container">
</div>

...或者如果您想在条目后使用逗号,请在模板中手动插入:

let names = ["a", "b"];
template = `<table>
          ${names.map(name => `<TR><TD>${name},</TD></TR>`).join("")}
          </table>
          `
let div = document.getElementById("container");
div.innerHTML = template;

<div id="container">
</div>