Могу ли я объединить оператор if else, который возвращает строку для серверных элементов HTML?

Question

Я работаю над веб-приложением, которое должно отображать то или иное значение в зависимости от состояния логического значения. Мне нужно, чтобы он отображал «ON», если мое var «значение» равно true, в противном случае оно должно отображать «OFF».

Я сделал этот код, и я был почти уверен, что он будет работать , но я ошибся:

var value = true // actually this changes over time
var s = new String();
s += '<span style="color:white; font-size:14px; font-weight:bold;">'+ "ALRM H2S:" +'</span>';
s += '<span style="color: orange; font-size:14px; font-weight:bold;">'+ if(value){return "ON"} else {return "OFF"} +'</span>';

return s;

Я получаю «Синтаксическая ошибка в строке (# 3)». Я думаю, что проблема должна заключаться в том, что я не могу объединить этот оператор if else, даже если они возвращают string, с остальными элементами HTML.

Можете ли вы пожалуйста помогите разобраться, что я делаю не так?

Большое спасибо.

Answer 1

Вы не можете запустить условный оператор при добавлении строк. Я бы предложил вам функцию стрелки, которая возвращает строку.

var value = true // actually this changes over time
var s = new String();
var ifOn = () => { value? "ON" :"OFF"}
s += '<span style="color:white; font-size:14px; font-weight:bold;">'+ "ALRM H2S:" +'</span>';
s += '<span style="color: orange; font-size:14px; font-weight:bold;">' + ifOn() +'</span>'

Answer 2

Вы правы, у вас не может быть встроенного оператора if, поэтому в этом случае вам следует использовать троичный оператор . Вы можете использовать его так:

var value = true; // actually this changes over time
var s = new String();
s += '<span style="color:white; font-size:14px; font-weight:bold;">' + "ALRM H2S:" + "</span>";
s += '<span style="color: orange; font-size:14px; font-weight:bold;">' + (value ? "ON" : "OFF") + "</span>";

return s;

Answer 3

Спасибо вам, ребята, за ваши отличные ответы!

Я придумал это не очень хорошее решение, как ваше, однако оно работает:

var s = new String();

var h2sStatus;

if(value){ h2sStatus = "ON"} else {h2sStatus = "OFF"}

s += '<span style="color:white; font-size:14px; font-weight:bold;">ALARM H2S: </span>';

s += '<span style="color: orange; font-size:14px; font-weight:bold;">'+ h2sStatus  +'</span>';

return s;

Выкладываю на всякий случай, если это возможно быть полезным для кого-то.