Javascript 包含ForEach的模板文本

Javascript 包含ForEach的模板文本,javascript,jquery,string,template-literals,Javascript,Jquery,String,Template Literals,是否可以在模板文本的ForEach中返回字符串值,以便将其添加到该位置?因为如果我记录它,它会返回未定义的。还是说我打字根本不可能 return `<div> <form id='changeExchangeForViewing'> <label for='choiceExchangeForLoading'>Change the exchange</label> <div class='form

是否可以在模板文本的
ForEach
中返回字符串值,以便将其添加到该位置?因为如果我记录它,它会返回未定义的
。还是说我打字根本不可能

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>"           
    })}
    `;
返回`
换货
${Object.keys(obj.forEach)(函数(键){
返回“+obj[键]+”
})}
`;

否,因为
forEach
忽略其回调的返回值,并且从不返回任何内容(因此,调用它会导致
未定义的

您正在寻找的,正是您想要的:

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("")}
    `;
返回`
换货
${Object.keys(obj).map(函数(键){
返回“+obj[键]+”
}).join(“”)
`;
请注意,映射后,代码使用
.join(“”
从数组中获取单个字符串(不带任何分隔符)。(我一开始忘记了这一点——我做了太多的反应——但在中指出了这一点。)


旁注:这不是一个“字符串文字”,而是一个。

因为
map()
返回一个数组,@T.J.Crowder的回答将生成无效的HTML,因为数组的
toString()
方法将在模板文字中调用,模板文字使用逗号分隔数组。要解决此问题,只需附加
join(“”)
以明确使用无分隔符:

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

此外,您还可以在地图本身中使用模板文字。

我认为有15分钟您无法使用模板文字accept@nitte93user3232918我需要等待9分钟,我建议最好将代码移到一个函数中,这样可以在回调中使用单独的模板文字。@rockstar:是的,我完全同意。@GalibHasanov-因为调用
forEach
的结果总是
未定义的
,但是调用
map
的结果是一个包含映射内容的数组。与我下面的评论相关:当你看到这样的小遗漏时,评论并让回答者知道更有用。(我最近做了太多的反应!)所以这意味着合作。仅供参考,任何阅读Stepheledev答案评论的人,修复已整合到公认的答案中,因此这里没有任何内容可看。;)