Question

是否可以在模板文字中返回ForEach中的字符串值，以便将其添加到该位置？因为如果我记录它会返回undefined。或者就像我输入的那样根本不可能？

return `<div>
                <form id='changeExchangeForViewing'>
    <label for='choiceExchangeForLoading'>Change the exchange</label>
    <div class='form-inline'>
    <select id='choiceExchangeForLoading' name='choiceExchangeForLoading' class='form-control'>

    ${Object.keys(obj).forEach(function (key) {
        return "<option value='" + key + "'>" + obj[key] + "</option>"           
    })}
    `;

Answer 1

不，因为forEach忽略了其回调的返回值，并且从不返回任何内容（因此，调用它会导致undefined）。

您正在寻找map，完全您想要的内容：

return `<div>
                <form id='changeExchangeForViewing'>
    <label for='choiceExchangeForLoading'>Change the exchange</label>
    <div class='form-inline'>
    <select id='choiceExchangeForLoading' name='choiceExchangeForLoading' class='form-control'>

    ${Object.keys(obj).map(function (key) {
        return "<option value='" + key + "'>" + obj[key] + "</option>"           
    }).join("")}
    `;

请注意，在映射之后，代码使用.join("")从数组中获取单个字符串（没有任何分隔符）。 （我最初忘记了这一点 - 做了太多React的事情 - 但stephledev在his/her answer中指出了这一点。）

旁注：这不是“字符串文字”，而是template literal。

Answer 2

由于map()返回一个数组，@ T.J。 Crowder的答案将产生无效的HTML，因为数组的toString()方法将在模板文字中调用，模板文字使用逗号分隔数组。要解决此问题，只需将join('')附加到明确使用无分隔符：

${Object.keys(obj).map(key => (
    `<option value="${key}">${obj[key]}</option>`
)).join('')}

此外，您可以在地图本身内使用模板文字。

模板文字中包含ForEach

2 个答案: