模板文字中包含ForEach

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在他/她的回答中指出了这一点.)

旁注:这不是"字符串文字",而是模板文字.

Answer 2

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

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

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