在条件语句中显示Javascript数据属性值

Question

我知道如何在任何标记中显示数据属性值。但是如何应用if else条件来显示文本呢?

例如，如果有带有value的data-attribute，那么它将被显示。但是如果没有找到数据属性，则显示默认文本。

下面是我的简单代码。

<h2 id="text" data-text="A Data Text Message"></h2>
<script type="text/javascript">
let message = document.getElementById("text").getAttribute("data-text");
/* If data-text attribute found with value, then this message will be show*/
// document.getElementById("text").innerHTML = message;
/* Otherwise this default message will be display*/
document.getElementById("text").innerHTML="A Data Text Messages";
</script>

Answer 1

let message = document.getElementById("text").getAttribute("data-text");
if (message) {
document.getElementById("text").innerHTML = message;
} else {
document.getElementById("text").innerHTML="A Data Text Messages";
}

<h2 id="text" data-text="A Data Text Message"></h2>

您只需要检查消息变量是否为真。如果data-text属性有值，它将为真，如果没有，它将不为真。

Answer 2

你可以这样应用if-else条件:

if (message == undefined || message.length == 0 ) {
document.getElementById("text").innerHTML="A Data Text Messages";
}
else{ 
document.getElementById("text").innerHTML = message;
}

Answer 3

一种简单的方法是使用条件(三元)运算符? :

如果消息为null或空，它将使用操作符的第二部分…

// Example using attribute
setH2(document.getElementById("text"));
// Example using empty or missing attribute
setH2(document.getElementById("text2"));
function setH2(ctrl) {
let message = ctrl.getAttribute("data-text");
ctrl.innerHTML = (message ? message : "A Data Text Messages");
}

<h2 id="text" data-text="A Data Text Message"></h2>
<h2 id="text2"></h2>

您还可以通过使用空合并操作符??来简化此操作:

// Example using attribute
setH2(document.getElementById("text"));
// Example missing attribute
setH2(document.getElementById("text2"));
// Example EMPTY attribute
setH2(document.getElementById("text3"));
function setH2(ctrl) {
let message = ctrl.getAttribute("data-text");
ctrl.innerHTML = (message ?? "A Data Text Messages");
}

<h2 id="text" data-text="A Data Text Message"></h2>
<h2 id="text2"></h2>
<h2 id="text3" data-text=""></h2>

检查消息是否为空-如果是，则使用?? ?之后的内容。，如果不是，则使用message变量。

但注意它不会将空属性识别为false ..所以它只能在缺失的情况下工作属性