Schöner Weg, um optional String in ES6 String-Vorlage

Question

Ich möchte hallo Benutzername angezeigt, wenn eine Bedingung isLoggedIn wahr ist, und nur Hallo sonst.

Ich verwende ES6 String-Vorlagen, um zu versuchen, die Syntax schöner als einfache alte Zeichenfolge Verkettung zu machen. Aber der beste Weg, die ich gefunden habe, es zu tun ist die folgende (es6fiddle)

`hello ${mockIsLoggedIn(false) ? username : ''}` 

Es ist immer noch nicht sehr schön Syntax, vor allem in längeren Vorlagen, wo es mehr als eine Variable ist ich dies mit tun will.

Ich habe versucht, eine Syntax, die Zeichenfolgen optional in Vorlagen enthält, basierend auf einer Bedingung zu finden, aber ich glaube nicht, dass es eine gibt. So etwas wie dies wäre schöner:

`hello ${condition && username}` 

Aber es macht falsch in den String, wenn die Bedingung falsch ist.

Ich habe auch versucht die Truthiness von username in die Variable selbst backen, das heißt haben usernameundefined oder null sein, wenn es nicht existiert - aber der String-Vorlage dann macht nur undefined oder null.

Kann jemand eine nettere Syntax oder eine Annäherung empfehlen, oder ist die erste Methode die beste, die ich mit String-Vorlagen machen werde?

Answer 1

Sie können condition && value || "" verwenden, aber das ist ungefähr so ​​schrecklich wie der ternäre Operator.

Ich denke, Ihre beste Wette eine markierte Vorlage hier zu verwenden, die leere Werte verwirft:

function nonEmpty(parts) { 
    var res = parts[0]; 
    for (var i=1; i<parts.length; i++) { 
     if (arguments[i]) // you might want to handle `0` different 
      res += arguments[i]; 
     res += parts[i]; 
    } 
    return res; 
} 

console.log(nonEmpty`hello ${mockIsLoggedIn(false) && username}`); 

Answer 2

nach einer Weile das Kommen wir zurück, ich glaube, das schönere Muster wie im Kommentar und andere Antwort angedeutet ist in der Tat, die Logik der Auflösung der Variablen von der Vorlage vollständig zu trennen.

Damit können Sie die gewünschte Syntax erhalten.

const username = isLoggedIn ? getUsername(): ''; 
const display = `hello${username && ' ' + username}` 

Oder, einfacher, aber conflating den Abstand/Layout der Vorlage mit den Variablen ein bisschen ..

const username = isLoggedIn ? ' ' + getUsername() : ''; 
const display = `hello${username}` 

Es ist kein Einzeiler, aber tatsächlich in den meisten Fällen, die wahrscheinlich zu sein eine gute Sache.