如果字符串为空，如何隐藏元素或 div？答案

【问题标题】：How to hide an element or div if a string is null?如果字符串为空，如何隐藏元素或 div？
【发布时间】：2018-02-15 18:02:30
【问题描述】：

我有一个网站，它使用服务器生成的 JSON 对象来填充其内容。我想为仅在图像有描述时出现的图像实现可选的文本描述。我试图通过将 JSON 对象中包含的描述分配给一个字符串并检查该字符串是否等于“null”来做到这一点，但这不起作用。这是我的代码：

HTML：

<p id="image-description"></p>

JavaScript：

// Note: I'm not trying to populate the innerHTML of <p> with the content 
// of `descriptionString` here 

// At beginning of script:
var descriptionString = ''

// Inside function that populates website with content from JSON object:
parsedJSON = JSON.parse(this.responseText);

descriptionString = parsedJSON['activities'][0]['description'];
if (descriptionString != 'null') {
    document.getElementById('image-description').style.display = 'block';
} else {
    document.getElementById('image-description').style.display = 'none';
}

image-description 元素始终与此代码一起出现，即使 descriptionString 是 'null'。我还尝试使用 .style.visibility = 'visible'; 和 .style.visibility = 'hidden'; 以及将元素放在 div 中，但它们都产生了相同的结果。此外，当我使用 CSS 为 image-description 设置默认样式并尝试使用 JavaScript 对其进行修改时，它不会改变。

我已经确认来自parsedJSON 的字符串已正确分配给descriptionString（并在不存在字符串时分配'null'）所以我一定做错了其他事情。

我还没有找到任何其他解决这个确切情况的答案，并且我试图不使用像 jQuery 这样的外部库。使用纯 JavaScript 解决此问题的最佳方法是什么？

【问题讨论】：

您是否 100% 确定 JSON 属性的值是 'null' 而不是 null？字符串值 "null" 和实际值 null 之间存在天壤之别。
包含您的 JSON 或代表性样本可能会很有帮助。
可以显示 JSON 文件吗？
我很确定该值是 'null' 而不是 null，原因有 3 个：1.) 当“null”分配给我的数据库中的条目的描述列时，它会出现被视为字符串，2.) 当我更改代码以检查 descriptionString != 'a-different-string-from-the-database' 是否发生相同的错误时，以及 3.) 当我构建一个接收来自服务器的完全相同的 JSON。
实际上，这里的评论者是对的：JSON 确实发送的是 null 而不是 'null'。我不认为是这种情况，因为当我最初尝试将响应视为null 时遇到错误，但我才意识到错误是由其他原因引起的。我的代码现在可以工作了——谢谢！

标签： javascript html css json dom

【解决方案1】：

首先尝试了解null和'null'之间的区别。

null : null 用于表示某些值的缺失。

descriptionString = null;
if (descriptionString != null) {
    document.getElementById('image-description').style.display = 'block';
} else {
    document.getElementById('image-description').style.display = 'none';
}

<div id="image-description">
Image 
</div>

'null' : '' 表示 JavaScript 中的字符串。

descriptionString = 'null';
if (descriptionString != null) {
    document.getElementById('image-description').style.display = 'block';
} else {
    document.getElementById('image-description').style.display = 'none';
}

<div id="image-description">
Image 
</div>

【讨论】：

这就是答案。我实际上已经理解了这种差异，但由于我的程序的不同部分响应服务器输出的方式，我认为我的服务器正在发送一个名为“null”的字符串而不是一个空值。我发现我的程序的另一部分是在我没有意识到的情况下将所有服务器响应转换为字符串，并且实际值为 null（例如，没有值）。

【解决方案2】：

您在比较中缺少一个 =，并且还删除了引号（除非您与字符串进行比较）。

if (descriptionString !== null)

【讨论】：

添加一个额外的 = 是一种很好的做法，但它几乎肯定不是 OP 问题的根源。此外，我们还没有确定 JSON 属性的值是 null 还是实际的字符串 "null"，所以这个建议可能是错误的。
@JDB 是的，只是想确保与该类型进行比较。
我在发帖前已经尝试过了，这不是问题的根源。

【解决方案3】：

您的代码中有错误。只是在描述中遗漏了一个分号并检查元素是否为空或将变量初始化为空。下面是要证明的sn-p

var descriptionString = '';

// Inside function that populates website with content from JSON object:
parsedJSON = JSON.parse(this.responseText);

descriptionString = parsedJSON['activities'][0]['description'];
if (descriptionString != '') {
    document.getElementById('image-description').style.display = 'block';
} else {
    document.getElementById('image-description').style.display = 'none';
}

在 JavaScript 中，null 是“无”。它应该是这样的不存在。

不幸的是，在 JavaScript 中，null 的数据类型是一个对象。

你可以认为它是 JavaScript 中的一个错误，即 typeof null 是一个对象。它应该为空。

正确的一个：

<p>An empty string has both a legal value and a type:</p>

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

<script>
var car = null;
if(car ==null)
  document.getElementById("demo").innerHTML ="The value is: " +car + "<br>" +"The type is: " + typeof car;
</script>

错了：

<p>An empty string has both a legal value and a type:</p>

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

<script>
var car = '';
if(car ==null)
  document.getElementById("demo").innerHTML ="The value is: " +car + "<br>" +"The type is: " + typeof car;
</script>

【讨论】：

感谢另一位评论者，我实际上刚刚找到了问题的根源。我以为我的服务器正在发送一个名为'null' 的字符串，但它实际上只是发送null。所以问题与您的建议相似，但不一样。
任何时候快乐编码:)

【解决方案4】：

试试这个

 if (!descriptionString.trim()||descriptionString.trim().length == 0) {
         document.getElementById('image-
       description').style.display = 'none';
      }
      else
      {
    document.getElementById('image-description').style.display = 'block';
      }

记住字符串值“null”和正常的null值是不一样的。在调试时记住这个区别

【讨论】：