19

是否可以在模板文字中返回一个字符串值，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>"           
    })}
    `;
4

2 回答 2

52

不，因为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在他/她的回答中指出了这一点。）

旁注：这不是“字符串文字”，而是模板文字。

于 2018-01-21T15:17:45.890 回答
12

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

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

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

于 2018-04-06T11:03:12.510 回答