Question

这个javascript使用append

输出一些对象属性

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时不输出它们和我的代码中的字符串相同？

Answer 1

您可以使用三元运算符表达：

.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 !

Answer 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);

Answer 3

如果你仍然显示<div class="client">即使没有客户端也没问题，你可以使用||运算符用空字符串替换“falsy”值，例如未定义的属性：

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构建为变量，那么您的代码将更容易理解。

Answer 4

在实际代码行之前执行：

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>'));

如果不显示属性，Javascript if if语句在追加字符串中检查对象属性是否未定义？

4 个答案: