Vorlagenliterale mit einem ForEach darin

Ist es möglich, einen Zeichenfolgenwert zurückzugeben in ForEach in einem Vorlagenliteral, damit es an dieser Stelle hinzugefügt wird? Denn wenn ich es logge, kehrt es zurück undefined. Oder ist das so wie ich geschrieben habe gar nicht möglich?

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>"           
    })}
    `;

Nein, weil forEach ignoriert den Rückgabewert seines Rückrufs und gibt niemals etwas zurück (der Aufruf führt daher zu undefined).

Du schaust nach mapwas geht Exakt was du willst:

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("")}
`;

Beachten Sie, dass der Code nach der Zuordnung verwendet .join("") um eine einzelne Zeichenfolge aus dem Array zu erhalten (ohne Trennzeichen). (Ich habe das anfangs vergessen – ich habe zu viel React-Zeug gemacht – aber stephledev hat in seiner/ihrer Antwort darauf hingewiesen.)

Das heißt, es ist möglicherweise einfacher zu lesen, wenn Sie es aufteilen, und Sie können eine Pfeilfunktion anstelle einer herkömmlichen Funktion verwenden, möglicherweise mit einem anderen Vorlagenliteral:

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("")}
`;

Abschließend werde ich erwähnen Object.entrieswas Ihnen einen Pfeil von gibt [key, value] Arrays, die Sie könnte beim Zuordnen der Optionen verwenden möchten (oder nicht, Object.keys geht auch gut):

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("")}
`;

Randnotiz: Das ist kein “String-Literal”, es ist ein Vorlage wörtlich.

Seit map() ein Array zurückgibt, erzeugt die Antwort von @TJ Crowder ungültiges HTML als die toString() -Methode eines Arrays wird innerhalb des Vorlagenliterals aufgerufen, das Kommas verwendet, um das Array zu begrenzen. Um dies zu beheben, hängen Sie einfach an join('') um explizit kein Trennzeichen zu verwenden:

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

Außerdem können Sie Template-Literale innerhalb der Map selbst verwenden.