web-dev-qa-db-ja.com

ForEachを含むテンプレートリテラル

テンプレートリテラルの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>"           
    })}
    `;
javascriptjquerystringtemplate-literals
9
Steven

いいえ、forEachはそのコールバックの戻り値を無視し、何も返さないため（したがって、呼び出すとundefinedになります）。

あなたは map を探しています、それはあなたが望むものをexactlyします：

_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 stuff- stephledev はそれを his/her answer 。）

サイドノート：それは「文字列リテラル」ではなく、 templateリテラル です。

25
T.J. Crowder

map()は配列を返すため、@ T.J。配列のtoString()メソッドはテンプレートリテラル内で呼び出されるため、Crowderの答えは無効なHTMLを生成します。テンプレートリテラルはコンマを使用して配列を区切ります。これを修正するには、join('')を追加して、区切り文字を明示的に使用しないようにします。

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

また、マップ自体の内部でテンプレートリテラルを使用できます。

5
stephledev