带有 ForEach 的模板文字

Question

是否可以在模板文字中 return ForEach 中的字符串值，以便将其添加到该位置？因为如果我记录它 returns 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 忽略其回调的 return 值并且从不 return 任何东西（因此，调用它会导致 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 pointed it out in 。）

旁注：这不是 "string literal,"，而是 template literal。

Answer 2

因为map()returns一个数组，@T.J。 Crowder 的答案将产生无效的 HTML，因为数组的 toString() 方法将在模板文字内调用，模板文字使用逗号分隔数组。要解决此问题，只需附加 join('') 以显式不使用定界符：

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

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

带有 ForEach 的模板文字

Template Literals with a ForEach in it

javascript

string

jquery

template-literals