Einfügen einer if-Anweisung in das ES6-Vorlagenliteral

Ich habe eine einfache Ajax-Anforderung, die einige Daten zurückgibt und dann in ein Vorlagenliteral einfügt. Ich habe mich gefragt, ob es möglich ist, eine ‘if’-Anweisung in die Vorlage einzufügen.

Im Wesentlichen um eine weitere Codezeile hinzuzufügen, wenn das JSON-Objekt eine 5. Farbe hat.

  $.ajax({
url: 'http://localhost:8888/ColourCatchr%202/app/search.php'
}).done(function(results){
var res = jQuery.parseJSON(results);
console.log(res);
$.each(res,function(index,result){
  $('.palettes').append(`
    <div class="panel panel-default">
      <div class="panel-heading">
        <h3 class="panel-title">${result.name}</h3>
      </div>
      <div class="panel-body">
        <div class="col-md-12 colors">
          <div class="color" style=background-color:#${result['color 1']}><h6>${result['color 1']}</h6></div>
          <div class="color" style=background-color:#${result['color 2']}><h6>${result['color 2']}</h6></div>
          <div class="color" style=background-color:#${result['color 3']}><h6>${result['color 3']}</h6></div>
          <div class="color" style=background-color:#${result['color 4']}><h6>${result['color 4']}</h6></div>

          ${if(result['color 5']){
            <div class="color" style=background-color:#${result['color 5']}><h6>${result['color 5']}</h6></div>
            }
          }

          <div class="color" style=background-color:#${result['color 5']}><h6>${result['color 5']}</h6></div>
          <p>on hover change to translucent background and black text for ecah color</p>
        </div>
      </div>
      <div class="panel-footer">
          <a class="btn btn-info btn-lg" href="https://stackoverflow.com/questions/44488434/update.html?id=${result.id}">Edit</a>
          <a class="btn btn-danger btn-lg">Delete</a>
      </div>
    </div>`
    )
})

})

Sie müssen Ihre Logik in eine Funktion verschieben oder den ternären Operator verwenden:

`${result['color 5'] ? 'color 5 exists!' : 'color 5 does not exist!'}`

Zusätzliches Beispiel basierend auf Kommentar:

`${result['color 5'] ? 
    `<div class="color" style=background-color:#${result['color 5']}><h6>${result['color 5']}</h6></div>` 
: ''}`

Von dem MDN Artikel zu Template-Strings:

Vorlagenliterale sind Zeichenfolgenliterale, die eingebettet werden können Ausdrücke.

Sie können also auch eine IIFE (immediately invozierte Funktion Ausdruck). Z.B: (() => { ... })().

Ich würde jedoch argumentieren, dass Sie, wenn Sie eine kompliziertere Logik als einen ternären Ausdruck in Ihren Vorlagenzeichenfolgen benötigen, eine Umgestaltung Ihres Codes in Betracht ziehen sollten. Da dies jedoch in den anderen Antworten nicht dargestellt wurde, finden Sie hier einen Ansatz mit IIFEs. Dies kann in Fällen nützlich sein, in denen ein ternärer Ausdruck ausreichen würde, Sie aber Ihre Verzweigungslogik lieber in imperitiver Form lesen möchten; oder in Fällen, in denen Sie andere mehrzeilige Vorlagenzeichenfolgen einbetten.

Lassen Sie mich ein Beispiel für Sie machen:

/* Note: I'm using a tagged template literal for HTML templates here, 
 * similar to the one provided by www.npmjs.com/package/lit-html. 
 */

html`
  <div class="example">
    ${(() => {
      if (result['color 5']) {
        return html`
          <div class="color-preview" style="background-color: ${result['color 5']}"></div>
          <span> Here's your color #5 </span>
        `
      } else {
        return html`<div>You don't have a 5th color</div>`
      }
    })()}
  </div>
`

Da ein Funktionskörper mehr als nur Ausdrücke enthalten kann, ermöglicht Ihnen diese Technik, jede beliebige JavaScript-Syntax „innerhalb“ Ihrer Vorlagenzeichenfolge zu verwenden.

Sie können den nullischen Koaleszenzoperator innerhalb des Vorlagenliterals verwenden.

`${result['color 5'] ?? `Color 5 exists`}`

Eine bessere Möglichkeit besteht darin, Standardparameter für die Funktion zu erstellen.

const renderHello = (name = "new member") => `Hello ${name}`;

console.log(1, renderHello());
console.log(2, renderHello("James"));
// 1 Hello new member
// 2 Hello James

Um eine Variable zu verwenden, während Sie die verwenden ternärer Operatorverwenden ein verschachteltes Template-Literal so was:

let var1 = 6
let var2 = 8

console.log(`${ `${var1 > var2 ? var1 + ` (var1) `: var2 + ` (var2) `}` } is greater`)

Es kann vorkommen, dass Sie nichts rendern möchten, wenn dies der Fall ist false, wie Sie es in Ihrer Frage haben. Sie können daher Folgendes tun:

(Hinweis: Es ist auch möglich, Vorlagenliterale ineinander zu verschachteln, wenn sich das verschachtelte in a befindet ${})

const html = `
  <div>
    <div>
      Lots of HTML stuff
    </div>
    <div>

    ${result['color 5'] && `
      <div class="color" style=background-color:#${result['color 5']}><h6>${result['color 5']}</h6></div>
    `}
  </div>
`;

Das funktioniert, weil im Gegensatz zu anderen Sprachen in Javascript logische Operatoren (&& und ||) kehren nicht (notwendigerweise) zurück true oder false.

Der logische UND-Operator (&&):

Javascript gibt entweder die erste zurück falsch Variable, und wenn keine gefunden werden, die letzte Wahrheit Variable.

Der logische ODER-Operator (||)

Javascript gibt entweder die erste Wahrheitsvariable zurück, und wenn keine gefunden wird, die letzte Falschvariable.

Sie können dies hier in Aktion sehen:

console.log(true && true) // true
console.log(false && true) // false    
console.log("a" && "b"); // b
console.log(false && "b"); // false
console.log(0 && "b"); // 0
console.log("a" && NaN); // NaN

Dies wird sehr häufig in JSX verwendet.

const heading = 'head';
const location = 'erode';
const district="erode";

const isSameLocationDistrict = (location === district) || false;
const storeSlug = `${heading} ${isSameLocationDistrict === true ? location : `${location } ${district}`}`;
console.log(storeSlug);

// "head erode"
// "head erode1 erode"