如果未找到元素，将变量设置为 getElementById 的值或默认值的最简洁方法是什么？

Question

我试过

var test = document.getElementById("some_element").value || "defaultvalue";

但由于它返回null，所以这似乎不起作用。

到目前为止，我能想到的最短的是

var test = "defaultvalue";
if(document.getElementById("some_element") !== null) test = document.getElementById("some_element").value;

或

var test = (document.getElementById("some_element") !== null)?document.getElementById("some_element").value:"defaultvalue";

然而，有没有一种更简洁的方式来编写这种回退？

Answer 1

您可以将新的可选链接运算符与||:结合使用

var test = document.getElementById("some_element")?.value || "defaultvalue";
console.log(test);

这是一种非常新的语法——就像往常一样，在编写脚本时，为了支持旧的浏览器，使用Babel进行生产转换。

Answer 2

您可以在此处使用可选链接和零合并的组合：

var test = document.getElementById("some_element")?.value ?? "defaultvalue";

Answer 3

新的操作符很好，但如果你需要完全的浏览器兼容性，并且不想使用transiler，这可能是另一种选择：

console.log( 
(document.getElementById("nothing") || {value: null})
.value ||"default" 
);

.as-console-wrapper { top: 0; max-height: 100% !important; }

Answer 4

稍短的版本，不检查是否为空并使用可选的链接

var valueexists = document.getElementById("some_element")?.innerText ?? "defaultvalue";
var valuenotthere = document.getElementById("some_")?.innerText ?? "defaultvalue";
console.log(valueexists);
console.log(valuenotthere);

<div id="some_element">value present</div>