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

Question

map返回一个数组但是

我明白了

,
a
b

而非预期

a,
b,

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

Answer 1

因为map返回一个数组，并且模板将其转换为字符串，这意味着您将获得它们之间带逗号的数组条目。结果是：

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

请注意

1. 只有一个逗号（你说你期待两个逗号，但是Array#toString调用Array#join只会在元素之间放置逗号，而不是在开头或结尾。）< / LI>
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>

Answer 2

map可能不是你想要的，reduce在这种情况下是正确的方法（map返回一个数组，你想要一个字符串）。

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