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

Question

我有这样的变量和循环：var htmlmask = `<table>    <tr>        <td>種類</td>        <td>            <div class="form-element maskselectop">                <select class="form-element">                    ${masktypes.map((masktype, i)=>{                        let option = '';                        return option = `<option value="${masktype}" ${(i === 0) ? 'selected' : ''}>${masktype}</option>`;                    })}                </select>            </div>        </td>    </tr>  </table>`;$('body').html(htmlmask);你能告诉我为什么在返回后comma出现option？我的语法有什么问题？

Answer 1

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

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

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

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

所以完整的代码会变成：

const masktypes = ["1", "2"];

var htmlmask = `

    <table>

        <tr>

            <td>種類</td>

            <td>

                <div class="form-element maskselectop">

                    <select class="form-element">

                        ${masktypes.reduce((acc, masktype, i) => 

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

                    </select>

                </div>

            </td>

        </tr>

      </table>`;

$('body').html(htmlmask);

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

Answer 2

它使您的元素数组成为字符串。利用

<select class="form-element">

    ${masktypes.map((masktype, i)=>{

        let option = '';

        return option = `<option value="${masktype}" ${(i === 0) ? 'selected' : ''}>${masktype}</option>`;

    }).join("")}

</select>

只需添加.join("")，它就会加入没有逗号。