为什么值 0 没有被解析但其他数字被解析？

Question

我正在为 Celcius、Kelvin、Farenheit 开发温度转换器，并且一直在解决这个小问题。我正在使用事件侦听器来跟踪和解析我的输入，每当我传入任何数字时，转换都会起作用，包括 0。我有 3 个带有 3 个占位符文本的输入字段，因此如果我想转换摄氏温度，它们会转换为开尔文和华氏。但是，当我退格并将输入留空时，其他两个温度返回 NaN，我理解这是因为这些字段现在没有值。

所以现在我想解决这个问题，将输入留空并将占位符文本重置回原来的状态，而不是显示 NaN。我试过做 if 语句来捕捉这个特定的问题，它工作得很好。现在我可以在不同温度之间转换数字，甚至退格也会重置占位符文本。一切正常，但数字 0。只要我输入 0，它就不会被解析，也没有任何事情发生。

const celciusInput = document.querySelector("#celcius > input");

const fahrenheitInput = document.querySelector("#fahrenheit > input");

const kelvinInput = document.querySelector("#kelvin > input");

function celciusConverter() {

  const cTemp = parseFloat(celciusInput.value) || "";

  const fTemp = cTemp * (9 / 5) + 32;

  const kTemp = cTemp + 273.15;

  //condition if there is an empty string in the input, placeholder values would reset instead of returning NaN.

  if (cTemp == "") {

    fahrenheitInput.value = "";

    kelvinInput.value = "";

  } else {

    fahrenheitInput.value = Math.round(fTemp);

    kelvinInput.value = Math.round(kTemp);

  }

}

celciusInput.oninput = celciusConverter;

<div id="celcius">celcius: <input></div>

<div id="fahrenheit">fahrenheit: <input></div>

<div id="kelvin">kelvin: <input></div>

我原以为 0 会被解析，然后像任何其他数字一样进行转换。有谁知道为什么会这样？

Answer 1

问题是这一行：const cTemp = parseFloat(celciusInput.value) || "";该||操作符返回它的第一个操作数，如果它是truthy，否则返回第二opererand。如果用户输入0，则parseFloat()返回0，这是 falsey，因此cTemp设置为""而不是0。您应该检查是否parseFloat()返回有效数字，而不是它是否为真。let cTemp = parseFloat(celcisuInput.value);…if (isNaN(cTemp)) {&nbsp; &nbsp; fahrenheitInput.value = "";&nbsp; &nbsp; kelvinInput.value = "";} else {&nbsp; &nbsp; fahrenheitInput.value = Math.round(fTemp);&nbsp; &nbsp; kelvinInput.value = Math.round(kTemp);}示例片段：const celciusInput = document.querySelector("#celcius > input");const fahrenheitInput = document.querySelector("#fahrenheit > input");const kelvinInput = document.querySelector("#kelvin > input");function celciusConverter() {&nbsp; const cTemp = parseFloat(celciusInput.value);&nbsp; const fTemp = cTemp * (9 / 5) + 32;&nbsp; const kTemp = cTemp + 273.15;&nbsp; if (isNaN(cTemp)) {&nbsp; &nbsp; fahrenheitInput.value = "";&nbsp; &nbsp; kelvinInput.value = "";&nbsp; } else {&nbsp; &nbsp; fahrenheitInput.value = Math.round(fTemp);&nbsp; &nbsp; kelvinInput.value = Math.round(kTemp);&nbsp; }}celciusInput.oninput = celciusConverter;<div id="celcius">celcius: <input></div><div id="fahrenheit">fahrenheit: <input></div><div id="kelvin">kelvin: <input></div>