更好的方式可选择在ES6字符串模板中包含String

Question

如果条件为真,我想显示hello用户名isLoggedIn,否则只打招呼.

我正在使用ES6字符串模板来尝试使语法比普通的旧字符串连接更好.然而,我发现这样做的最好方法是以下(es6fiddle)

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

它仍然不是很好的语法,特别是在较长的模板中,我想要使用多个变量.

我一直在尝试根据条件找到一个包含字符串的语法,可选择进入模板,但我认为没有.像这样的东西会更好:

`hello ${condition && username}`

但是,它呈现假到如果条件是假的字符串.

我也试过烘烤的感实性username成变量本身,即已经username是undefined或者null,如果不存在的话-但字符串模板然后就呈现未定义或空.

任何人都可以推荐更好的语法或方法,或者是我将要使用String模板做的第一种方法吗？

Answer 1

对于那些通过谷歌搜索“如果不为空，则在模板文字中打印变量”之类的东西登陆这里的人，这可能会有所帮助：

html = `<input type="text" placeholder="${data.placeholder || ''}" ... />`

Answer 2

您可以使用condition && value || ""，但这与三元运算符一样可怕。

我想你最好的选择是在这里使用一个标记模板来丢弃空值：

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 3

一段时间后回到这一点，我认为在评论和其他答案中提到的更好的模式确实是将解析变量的逻辑与模板完全分开。

这允许您获得所需的语法。

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

或者，更简单，但将模板的间距/布局与变量混为一谈。

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

它不是单行的，但实际上在大多数情况下这可能是一件好事。