为什么值 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)) {

    fahrenheitInput.value = "";

    kelvinInput.value = "";

} else {

    fahrenheitInput.value = Math.round(fTemp);

    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() {

  const cTemp = parseFloat(celciusInput.value);

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

  const kTemp = cTemp + 273.15;

  if (isNaN(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>