【问题标题】：javascript: How to use ternary expression render in html?javascript：如何在 html 中使用三元表达式渲染？
【发布时间】：2020-12-22 07:57:11
【问题描述】：

这是一个javascript三元运算符代码。

'<p>{balance>0?(Stock: {{balance}}):<span class="text-danger">Not Available</span>}</p>'

为了在 HTML 中正确呈现，我尝试了很多方法，但是没有运气。

输出：{balance>0?(Stock: {{balance}}):<span class="text-danger">Not Available</span>} 预期输出：（库存：23）或不可用（红色）

提前谢谢你！

以下是用于使用 Bloodhound 插件的部分代码。

var prodName_typehead = {
                    name: 'prod_name',
                    displayKey: 'name',
                    hint: (App.isRTL() ? false : true),
                    source: item.ttAdapter(),
                    limit: 20,
                    templates: {
                       suggestion: Handlebars.compile([
                            '<div class="media">',
                                  '<div class="pull-left">',
                                      '<div class="media-object">',
                                          '<img src="{{thumb}}" width="50" height="50"/>',
                                      '</div>',
                                  '</div>',
                                  '<div class="media-body">',
                                      '<p><strong>{{name}}</strong></p>',
                                      '<p>{{desc}}</p>',
                                       '<p>{balance>0?(Stock: {{balance}}):<span class="text-danger">Not Available</span>}</p>',
                                  '</div>',
                            '</div>',
                          ].join(''))
                    }
                  };

【问题讨论】：

用``来写表达式。

标签： javascript conditional-operator render-html

【解决方案1】：

我相信你想要的是这样的：

`<p>${balance>0?`Stock: ${balance}`:`<span class="text-danger">Not Available</span>`}</p>`

当我运行这个时：

balance = 0
`<p>${balance>0?`Stock: ${balance}`:`<span class="text-danger">Not Available</span>`}</p>`

我明白了：

"<p><span class="text-danger">Not Available</span></p>"

当我运行这个时：

balance = 1
`<p>${balance>0?`Stock: ${balance}`:`<span class="text-danger">Not Available</span>`}</p>`

我明白了：

"<p>Stock: 1</p>"

我正在使用 javascript 模板文字来完成您要进行的变量替换。

（基本上，您遇到的问题是您需要打勾（`）而不是双引号（“）来制作模板文字，正如 NarayaN 在他的评论中提到的那样，在第一个括号之前的 $ 开始嵌入 javascript 和然后在第一个字符串选项中为 balance 嵌套相同的逻辑。）

【讨论】：

我尝试了您建议的方法，但它不起作用 -> 709 Uncaught ReferenceError: balance is not defined.
如果compile 步骤的输入需要双括号，正确的解决方案应该是：<p>${balance>0?Stock: {{balance}}:不可用}</p>
错误消失但仍无法正常工作。输出显示如下 ${balance>0?Stock: {{balance}}:Not Available}
@user610983 抱歉，我之前的评论可能格式不正确，您能否确认您输入的内容（刻度在这里不起作用，所以用刻度替换我写的单引号）：'
${ balance>0?'库存：{{balance}}':'不可用'}
'
是的。我用刻度替换了单引号并添加了双括号。这次我得到一个错误：意外字符串。