よりよい方法は、私は条件<code>isLoggedIn</code>がtrueの場合<strong>ハローユーザ名</strong>を表示したい、とだけ<strong>ハロー</strong>そうES6文字列テンプレート

Question

に文字列が含まれます。

私はES6文字列テンプレートを使用して、普通の古い文字列連結よりも構文をよくするようにしています。しかし、私はそれを行うことを見つけた最良の方法は、それは特に私がこれをしたい複数の変数がある長いテンプレートで、まだ非常に素敵な構文ではありません、以下の（es6fiddle）

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

です。

私は、条件に基づいて文字列を任意にテンプレートに含む構文を見つけようとしていましたが、私はそこには存在しないと思います。このような何かはよりよい次のようになります。

`hello ${condition && username}` 

しかし、条件がfalseの場合には、文字列の中に偽をレンダリングします。

Iはまた、すなわち、それが存在しない場合usernameはundefined又はnullこと有し、変数自体にusernameのtruthinessを焼成する試み - 文字列テンプレートは、次にちょうど未定義又はヌルをレンダリングしかし。

誰かが、より良い構文やアプローチをお勧めすることができますか、または最初の方法は、私は文字列テンプレートで行うつもりですか？

Answer 1

condition && value || ""を使用することができますが、これは3者演算子ほど恐ろしいことです。

私はあなたの最善の策は、空の値を破棄し、ここでタグ付けされたテンプレートを使用することです推測：コメントや他の回答で示唆したように

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

はしばらく後に戻ってこれに来て、私はよりよいパターンだと思います実際には変数をテンプレートから解決するロジックを完全に分離することになります。

これにより、目的の構文を得ることができます。

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

あるいは、単純に、しかし、変数とテンプレートの間隔/レイアウトをconflatingビット..

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

それはワンライナーではないのですが、実際にはほとんどの場合、それは可能性が高いですよいこと。