JavaScript如何将NULL转换为0

Question

我正在使用jQuery获取元素的高度。 但是如果该元素不存在，以下代码将返回NULL：

$height = $('#menu li.active ul').height(); // returns integer or null

以下代码是一种跨浏览器安全的获取整数值的方法，适用于所有情况吗？

$height = $('#menu li.active ul').height() + 0;

- pbaldauf

---

为什么不先检查元素是否存在呢？ --- 另外 + 0 将把 null 强制转换为 0。 - evolutionxbox

先尝试计算长度，如果长度大于0，则计算高度。 - Sandeep J Patel

在非存在的元素中使用高度为0似乎真的是一个不好的想法。参见XY问题。而且如果这不是一个如此糟糕的想法，jQuery早就已经这么做了。 - A. Wolff

Answer 1

有很多方法可以处理这个问题。您描述的添加整数值以强制转换类型的方法是可行的。您还可以显式地转换为数字：

$height = Number($('#menu li.active ul').height());
// or:
$height = +$('#menu li.active ul').height();

或者您可以使用逻辑运算符，因为 null 会被强制转换为 false：

$height = $('#menu li.active ul').height() || 0;

- Rory McCrossan

---

逻辑运算符在这里似乎是最正确的解决方案。 - VisioN

这也是我通常的偏好。 - Rory McCrossan

第二个版本正是我所需要的。谢谢。 - pbaldauf

Answer 2

是的，它是安全的。

一个更短的替代方案：

$height = +$('#menu li.active ul').height();

（请注意在$之前的+）

注：此处使用了HTML标签，请勿删除。

- Christoph

---

如果选择器“#menu li.active ul”中的项目不存在，则使用“+”将返回NaN。 - Levent Yumerov

不，它返回0。在Chrome 52中测试过。 - Christoph

由于某些原因，在Kubuntu下，Chrome 52返回NaN。 - Levent Yumerov

确定吗？我正在使用Kubuntu。我在控制台中使用以下内容进行测试：+ $（“.non-existing-class”）.height（）。 - Christoph

编辑：我已经测试过版本3.1.0。 - Levent Yumerov

很好的版本。因此我会点赞该答案。不确定是否跨浏览器兼容，或者对于在 Kubuntu 中使用不同版本的 jQuery 会产生不同的结果。 - pbaldauf

Answer 3

最简单的方法是这样做...

$height = $('#menu li.active ul').height() || 0;

这里的false值将会是：

• false
• null
• undefined
• " "
• 0
• NaN

- Ramdeo angh

Answer 4

我的简短解决方案是： $height = $('#menu li.active ul').height() || 0。

如果您想要更详细的解决方案，您可以查看其他用户的答案。

编辑：它也取决于jQuery版本。

- Levent Yumerov

Answer 5

这实际上是更好的做法...

if($('#menu li.active ul').length > 0){
   $height = $('#menu li.active ul').height();
}else{
    ......
}

- Sandeep J Patel

Answer 6

我使用了上面被接受的答案和其他练习，得到了一个不错的结果。

我们可以使用parseFloat或parseInt，它们会给出0或实际值。请参见演示，特别是最后一个结果：

function myFunction() {
  var a = parseFloat("10") + "<br>";
  var b = parseFloat("10.00") + "<br>";
  var c = parseFloat("10.33") + "<br>";
  var d = parseFloat("34 45 66") + "<br>";
  var e = parseFloat("   60   ") + "<br>";
  var f = parseFloat("40 years") + "<br>";
  var g = (parseFloat("1.1234") ||0) + "<br>";

  var n = a + b + c + d + e + f + g;
  document.getElementById("demo").innerHTML = n;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<p>Click the button to parse different strings.</p>

<button onclick="myFunction()">Try it</button>

<p id="demo"></p>

- Ajay2707

Answer 7

只需检查元素是否存在：

var $height = 0;
if($('#menu li.active ul').length > 0){
  $height = $('#menu li.active ul').height();
}

- Willi Pasternak

Answer 8

你可以检查 $("#menu li.active ul") 是否不为 null:

$height = $('#menu li.active ul') != null ? $('#menu li.active ul').height() : 0;

- Alessio Cantarella