使用三元运算符时如何检查Truthy值？代码报错求助

需求：用三元运算符判断currentTitle是否为Truthy，是则设置playingSong.textContent为currentTitle，否则设为空字符串；同理处理currentArtist与songArtist.textContent。

以下是报错的两种写法：

第一种写法：

const setPlayerDisplay = () => {
  const playingSong = document.getElementById("player-song-title");
  const songArtist = document.getElementById("player-song-artist");
  const currentTitle = userData?.currentSong?.title;
  const currentArtist = userData?.currentSong?.artist;
  currentTitle ? playingSong.textContent = currentTitle : playingSong.textContent = ""; // 报错行
  currentArtist ? songArtist.textContent = currentArtist : songArtist.textContent = ""; // 报错行
};

第二种写法：

currentTitle = currentTitle ?  playingSong.textContent = currentTitle : playingSong.textContent = "";
currentArtist = currentArtist ? songArtist.textContent = currentArtist : songArtist.textContent = "";

问题分析 #

1. 第一种写法的核心问题是运算符优先级：三元运算符?:的优先级高于赋值运算符=，导致代码被错误解析为(currentTitle ? playingSong.textContent = currentTitle : playingSong.textContent) = ""——这相当于给一个表达式结果赋值，属于非法操作，因此触发报错。
2. 第二种写法逻辑完全错误：你试图把赋值操作的结果重新赋值给currentTitle/currentArtist，既无必要，也会因同样的优先级问题报错，同时还会覆盖原本的变量值。

正确写法 #

直接将三元表达式的结果赋值给textContent，这是三元运算符的标准用法，也彻底规避了优先级问题：

const setPlayerDisplay = () => {
  const playingSong = document.getElementById("player-song-title");
  const songArtist = document.getElementById("player-song-artist");
  const currentTitle = userData?.currentSong?.title;
  const currentArtist = userData?.currentSong?.artist;
  
  playingSong.textContent = currentTitle ? currentTitle : "";
  songArtist.textContent = currentArtist ? currentArtist : "";
};

更简洁的替代写法 #

利用JavaScript的短路求值特性，Truthy值会直接返回，否则返回空字符串，代码更精简：

const setPlayerDisplay = () => {
  const playingSong = document.getElementById("player-song-title");
  const songArtist = document.getElementById("player-song-artist");
  const currentTitle = userData?.currentSong?.title;
  const currentArtist = userData?.currentSong?.artist;
  
  playingSong.textContent = currentTitle || "";
  songArtist.textContent = currentArtist || "";
};

注意：如果currentTitle可能是0或""这类你需要保留的Falsy值，就用三元运算符；如果这些值也需要替换为空字符串，短路求值的写法更高效。

内容的提问来源于stack exchange，提问作者David