Question

我有一个网页，根据一些布尔标志，会将各种元素附加到HTML页面。

为了使代码简洁，我尝试尽可能使用三元运算符 - 以便保存if语句的负载。

但是，我想知道在使用三元运算符时，如果我的三元运算符失败，在动态创建的元素中不附加任何元素（如果有意义的话）是什么最佳实践。即：

$('<div>').append(
    (myBooleanFlag ? $('<p>Some child element</p>') : /*What here???*/)
);

我有三个解决方案如下，但我不知道哪一个最好，我是否应该避免：

附加一个空的jQuery对象 - 这似乎是正确的方法，因为它意味着两个结果都是jQuery对象类型：

$('<div>').append(
    (myBooleanFlag ? $('<p>Some child element</p>') : $())
);

一个空字符串，无论如何它似乎都是错误的，因为它们的类型不同：

$('<div>').append(
    (myBooleanFlag ? $('<p>Some child element</p>') : '')
);

追加null - 这似乎是合乎逻辑的，但我不想引起任何类型的错误：

$('<div>').append(
    (myBooleanFlag ? $('<p>Some child element</p>') : null)
);

那你最好说哪个？

Answer 1

但是，我想知道在使用三元运算符时，最佳做法是什么，不附加元素

最佳做法是不要使用三元运算符来处理不合适的情况。如果你不知道第三个操作数是什么，很明显这种情况不适合使用三元运算符。

虽然可以使用空白字符串：

$('<div>').append(
    (myBooleanFlag ? '<p>Some child element</p>' : '')
);

......使用if时更清晰，更简洁，更高效：

if (myBooleanFlag) {
    $('<div>').append('<p>Some child element</p>');
}

我毫不犹豫地提及它，但这里适用的另一个JavaScript习惯是使用&&运算符和表达式语句：

myBooleanFlag && $('<div>').append('<p>Some child element</p>');

这是可能的，因为在JavaScript中，表达式可以是一个语句。由于&&被短路，如果myBooleanFlag为假，则不会触发append来电。

有些人真的很喜欢这种语法。其他人发现很难阅读和调试。它基本上是这种形式的隐藏if：

if (myBooleanFlag) $('<div>').append('<p>Some child element</p>');

...这与所有常见的编码惯例有关，总是使用{}条件等等。但同样，这是一种风格的东西。

附注：您可以在上面的正面案例中使用字符串，在将其传递给$(...)之前无需使用append，所以我在上面将其遗漏了。

附注2：当将它作为参数传递给函数时，不需要在条件周围放置parens。

Answer 2

var result =  myBooleanFlag ? $('<p>Some child element</p>') : null;

$('<div>').append(result);

Answer 3

您只需使用if语句：

if(myBooleanFlag ){
    $('<div>').append('<p>Some child element</p>');
}

Answer 4

我不会在这里建议三元运算符。

无论您myBooleanFlag的价值是多少，您都会使用append()方法，即使根本没有必要。那你为什么要调用jQuery函数两次，即使你没有什么可追加的呢？

直接if语句足以满足您的目的（而且更具可读性）

if (myBooleanFlag){
    $('<div>').append('...');
}

如果你想要一个替代的更短的语法（甚至比三元运算符更短），你可以使用这个表达式/语句

myBooleanFlag && $('<div>').append('...');

仅当append()为myBooleanFlag时才会执行true，因此当标志为false时，不会调用jQuery。

Answer 5

1）用 $（）追加div，因为你在括号内没有任何对象会给出错误

2）使用''附加div是正确的方法。

3）使用null附加div是不正确的，因为 null 也被视为字符串

所以使用第二个