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

如果条件

isLoggedIn

为真，我想显示hello username，否则只显示hello

我正在使用ES6字符串模板来尝试使语法比普通的旧字符串连接更好。然而，我发现最好的方法是以下（）

这仍然不是很好的语法，特别是在较长的模板中，我想使用多个变量来实现这一点

我一直在试图找到一种语法，根据条件将字符串选择性地包含到模板中，但我认为没有。这样会更好：

`hello ${condition && username}`

但是，如果条件为false，它会将false渲染到字符串中

我还尝试将

username

的真实性烘焙到变量本身，即have

username

be

undefined

或

null

（如果它不存在的话）-但是字符串模板只呈现undefined或null

---

有人能推荐一种更好的语法或方法吗，或者第一种方法是我对字符串模板最好的方法吗？

您可以使用

条件和值| | |”“

，但这和三元运算符一样可怕

我想您最好的选择是在此处使用标记模板，该模板将丢弃空值：

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}`);

函数非空（部分）{
var res=零件[0]；
对于（var i=1；i过了一段时间再回到这里，我认为评论和其他答案中提到的更好的模式确实是将解析变量的逻辑与模板完全分离

这允许您获得所需的语法

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

或者更简单，但将模板的间距/布局与变量稍微合并

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

这不是一行，但实际上在大多数情况下，这可能是一件好事。
对于那些通过谷歌搜索“print variable in template literal if not null”（模板文本中的print variable in template literal if not null）等方式登陆此处的人，这可能会有所帮助：

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

html=``
要得到您想要的，
条件必须是
”
。不错，没有查看标记的模板
html = `<input type="text" placeholder="${data.placeholder || ''}" ... />`