当我在模板文字中使用 .map 时，为什么我的输出中有逗号？

Question

我里面有变量和循环，如下所示：

\n

var htmlmask = `\n<table>\n    <tr>\n        <td>\xe7\xa8\xae\xe9\xa1\x9e</td>\n        <td>\n            <div class="form-element maskselectop">\n                <select class="form-element">\n                    ${masktypes.map((masktype, i)=>{\n                        let option = \'\';\n                        return option = `<option value="${masktype}" ${(i === 0) ? \'selected\' : \'\'}>${masktype}</option>`;\n                    })}\n                </select>\n            </div>\n        </td>\n    </tr>\n  </table>`;\n\n$(\'body\').html(htmlmask);\n

\n

你能告诉我为什么return 后comma会出现 Between吗？option

\n

\n

我的语法有什么问题吗？

\n

Answer 1

它将元素数组制作为字符串。使用

<select class="form-element">
    ${masktypes.map((masktype, i)=>{
        let option = '';
        return option = `<option value="${masktype}" ${(i === 0) ? 'selected' : ''}>${masktype}</option>`;
    }).join("")}
</select>

只需添加即可.join("")，无需逗号即可连接。

Answer 2

因为该Array.prototype.map函数返回一个新数组。当您将数组连接到字符串时，数组也会转换为字符串。当数组转换为字符串时，它是用逗号分隔的。

\n

\r\n

\r\n

const arr = [\'<a>\', \'<b>\'];\n\nconsole.log(arr.toString()); // <a>,<b>

\r\n

\r\n

\r\n

\n

我将使用该Array.prototype.reduce函数将数组缩减为单个字符串。

\n

masktypes.reduce((acc, masktype, i) => \n    acc + `<option value="${masktype}" ${(i === 0) ? \'selected\' : \'\'}>${masktype}</option>`, \'\')\n

\n

所以完整的代码将变成：

\n

\r\n

\r\n

masktypes.reduce((acc, masktype, i) => \n    acc + `<option value="${masktype}" ${(i === 0) ? \'selected\' : \'\'}>${masktype}</option>`, \'\')\n

\r\n

const masktypes = ["1", "2"];\n\nvar htmlmask = `\n    <table>\n        <tr>\n            <td>\xe7\xa8\xae\xe9\xa1\x9e</td>\n            <td>\n                <div class="form-element maskselectop">\n                    <select class="form-element">\n                        ${masktypes.reduce((acc, masktype, i) => \n                            acc + `<option value="${masktype}" ${(i === 0) ? \'selected\' : \'\'}>${masktype}</option>`, \'\')}\n                    </select>\n                </div>\n            </td>\n        </tr>\n      </table>`;\n\n$(\'body\').html(htmlmask);

\r\n

\r\n

\r\n

\n