Javascript, если оператор в строке добавления проверки, если свойство объекта не определено, если не отображать свойство?

Question

Javascript, если оператор в строке добавления проверки, если свойство объекта не определено, если не отображать свойство?

0

Этот javascript выводит несколько свойств объекта с помощью добавления

d.addClass("has-caption")
 .append(g('<span class="caption" />')
 .html(b.caption + '<div class="cat">' + b.category + '</div>' + '<div class="client">' + b.client + '</div>'));

На моем сайте, если b.category и b.client не определены, они отображаются как неопределенные. Поэтому я попытался добавить оператор if, чтобы проверить, были ли эти свойства в основном пустыми или имели значение с этим оператором if, добавив проверку, если b.category не была определена.

d.addClass("has-caption")
 .append(g('<span class="caption" />')
 .html(b.caption + '<div class="cat">'if (typeof b.category !=== "undefined") { +b.category+} '</div>' + '<div class="client">' + b.client + '</div>'));

Я подумал, что, возможно, оператор if может проверить, не является ли b.category неопределенным, чтобы отображать его, иначе оно не выводит это свойство.

Это явно не работает, и мои знания javascript не очень хороши, так как я могу использовать этот оператор if, чтобы проверить, не являются ли свойства неопределенными или нет, если они отображают их в противном случае, они не выводят их при использовании append и тех же строка как в моем коде?

Anagio 06 янв. 2014, в 22:41

Источник

0

Смотрите условный оператор
gilly3 06 янв. 2014, в 21:35

Теги:

javascript

jquery

if-statement

append

4 ответа

2

Если вы в порядке, показывая <div class="client"> даже если нет клиента, вы можете использовать || оператор для замены значений "ложных", таких как неопределенные свойства, с пустой строкой:

d.addClass("has-caption")
 .append(g('<span class="caption" />')
 .html(b.caption + '<div class="cat">' + (b.category||'') + '</div>' + '<div class="client">' + (b.client||'') + '</div>'))

Чтобы сделать то же самое, что и в вашем примере, вы можете использовать ?: Для исключения второго div:

d.addClass("has-caption")
 .append(g('<span class="caption" />')
 .html(b.caption + '<div class="cat">' + (b.category||'') + '</div>' + (d.client ? '<div class="client">' + b.client + '</div>') : ''))

Я бы отговаривал таких длинных лайнеров, сам. Если вы построили свой HTML как переменную, ваш код будет намного проще следовать.

Jacob 06 янв. 2014, в 19:56

2

Постройте свою строчку по частям, а затем добавьте ее:

var str = b.caption;
if (typeof b.category != "undefined") {
    str += '<div class="cat">' + b.category + '</div>';
}
str += '<div class="client">' + b.client + '</div>';
str += '</span>'; // note, it seems you missed that part.

d.addClass("has-caption")
 .append(g('<span class="caption" />')
 .html(str);

Scott Mermelstein 06 янв. 2014, в 19:12

1

Сделайте это до фактической строки кода:

b.category = typeof b.category !== "undefined" ? b.category : ''; 
d.addClass("has-caption")
 .append(g('<span class="caption" />')
 .html(b.caption + '<div class="cat">' +b.category+ '</div>' + '<div class="client">' + b.client + '</div>'));

Если вы не хотите изменять объект, сохраните его в var:

var t = typeof b.category !== "undefined" ? b.category : ''; 
d.addClass("has-caption")
 .append(g('<span class="caption" />')
 .html(b.caption + '<div class="cat">' +t+ '</div>' + '<div class="client">' + b.client + '</div>'));

Karl-André Gagnon 06 янв. 2014, в 19:16

Ещё вопросы

georg · Accepted Answer · 2014-01-06T20-00-00.000Z

Вы можете выразить это тернарным оператором:

.html(b.caption + '<div class="cat">' + (typeof b.category !== "undefined" ? b.category : '') +
   '</div>' + etc

или более причудливым способом с булевым "или":

.html(b.caption + '<div class="cat">' + (b.category || '') +
   '</div>' + etc

(последнее предполагает, что b.category не может быть 0).

хотя я лично предпочел бы написать (найти) специальную функцию форматирования:

.html("{caption} <div class='cat'>{category}</div> <div class='client'>{client}</div>".format(b))

Простейшая возможная реализация format может быть такой:

String.prototype.format = function(props) {
    return this.replace(/{(\w+)}/g, function(_, key) {
        return key in props ? props[key] : "";
    })
}

Пример:

b = {
    foo: 123
}

console.log("hi {foo} and {bar}!".format(b))
// hi 123 and !