javascript - 带有 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 在 his/her answer 中指出了这一点。)

也就是说，如果将其分解可能更容易阅读，并且您可以使用箭头函数而不是传统函数，或许可以使用另一个模板文字:

const options = Object.keys(obj).map((key) =>
    `<option value='${key}'>${obj[key]}</option>`
);
return `<div>
    <form id='changeExchangeForViewing'>
        <label for='choiceExchangeForLoading'>Change the exchange</label>
        <div class='form-inline'>
            <select id='choiceExchangeForLoading' name='choiceExchangeForLoading' class='form-control'>
                ${options.join("")}
`;

最后，我会提到 Object.entries，它为您提供了一个 [key, value] 数组的箭头，您可能想在映射选项中使用(或者不使用，Object.keys 也可以):

const options = Object.entries(obj).map((key, value) =>
    `<option value='${key}'>${value}</option>`
);
return `<div>
    <form id='changeExchangeForViewing'>
        <label for='choiceExchangeForLoading'>Change the exchange</label>
        <div class='form-inline'>
            <select id='choiceExchangeForLoading' name='choiceExchangeForLoading' class='form-control'>
                ${options.join("")}
`;

---

旁注:这不是“字符串文字”，而是 template literal .