Question

如果条件isLoggedIn为true，我想显示 hello用户名，否则只显示 hello 。

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

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

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

我一直在尝试根据条件找到一个包含字符串的语法，但是我认为没有。这样的事情会更好：

`hello ${condition && username}`

但是，如果条件为false，它会将 false 呈现到String中。

我还尝试将username的真实性烘焙到变量本身，即如果它不存在则username为undefined或null - 但字符串模板然后只需渲染未定义或 null 。

任何人都可以推荐更好的语法或方法，或者我是第一个使用字符串模板做的最好的方法吗？

Answer 1

对于那些通过谷歌搜索类似“如果不为null则为模板文字，打印变量”之类来到这里的人来说，这可能会有所帮助：

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

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

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

3 个答案: