使用三元运算符时如何检查真值

Question

我在使用三元运算符和检查值是否为真时遇到问题。我感觉我的语法不正确。下面是有关我需要做什么才能通过此步骤的说明，带有“此处”注释的两行代码是我为解决方案编写的内容。请帮助我。

“使用三元运算符检查 currentTitle 的计算结果是否为真值。如果是，则将playingSong.textContent 设置为 currentTitle。否则，将其设置为空字符串。 然后在下面，使用三元运算符来检查 currentArtist 是否为真。如果是这样，请将songArtist.textContent 设置为currentArtist。否则，将其设置为空字符串。”

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 = ""; //here
  currentArtist ? songArtist.textContent = currentArtist : songArtist.textContent = ""; //here
};

我尝试以不同的方式编写它，但仍然出现错误。这是我的另一个尝试。

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

Answer 1

您将 2 个单独的赋值放入三元运算符内，如下所示：

condition ? a = x : a = y; 您应该编写一个使用三元表达式的单个赋值，并让三元运算符决定使用什么值，如下所示：

a = condition ? x : y; 对于上述情况，

condition

是否为布尔值（真/假）或是否为真/假并不重要。

应用于您的代码，这就是您应该使用的：

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

最后，如果使用三元运算符不是实际要求，那么可以进一步缩短：

playingSong.textContent = currentTitle || "";
songArtist.textContent = currentArtist || "";