如何从天气API提取温度值转华氏度，解决转换时出现NaN的问题

问题核心原因 #

出现NaN的常见诱因有两个：

• 你选择从已经渲染完成的.tempDOM元素中反向提取温度值，若提取操作在displayWeather函数执行前触发，或者数字提取逻辑有漏洞，就会拿到非数字内容，转换后得到NaN
• 调用天气API时未指定单位参数，默认返回的开尔文温度虽然本身是数字，但如果后续处理逻辑错误（比如错误拼接字符串后再运算）也会触发NaN

最优解决方案 #

不要从DOM元素反取内容，直接使用API返回的原始temp数值做转换，从根源避免单位后缀的干扰。
摄氏度转华氏度的公式为：华氏度 = 摄氏度 * 1.8 + 32
如果调用OpenWeatherMap接口时未指定units=metric，原始返回的temp为开尔文单位，需要先转摄氏度：摄氏度 = 开尔文温度 - 273.15

修改后的代码示例 #

displayWeather: function (data) {
    const { name } = data;
    const { icon, description } = data.weather[0];
    const { temp, humidity } = data.main;
    const { speed } = data.wind;
    // 温度转换逻辑 假设API返回temp为摄氏度单位
    const tempC = Math.trunc(temp);
    const tempF = Math.trunc(temp * 1.8 + 32);
    document.querySelector(".city").innerText = "El tiempo en " + name;
    document.querySelector(".icon").src =
        "http://openweathermap.org/img/wn/" + icon + ".png";
    document.querySelector(".description").innerText = description;
    // 可按需选择展示单位，这里示例同时展示两个单位
    document.querySelector(".temp").innerText = `${tempC}°C / ${tempF}°F`;
    document.querySelector(".humidity").innerText =
        "Humedad: " + humidity + "% ";
    document.querySelector(".wind").innerText =
        "Velocidad del viento: " + speed + " km/h";
}

特殊场景修复（必须从DOM提取温度的情况） #

如果业务需要必须从已渲染的DOM元素中提取温度值，先确保提取操作在displayWeather执行完成后触发，再用正则过滤所有非数字相关字符：

// 提取DOM中的温度值并转数字
const tempText = document.querySelector(".temp").innerText;
// 过滤掉除了数字、负号、小数点之外的所有字符
const tempC = Number(tempText.replace(/[^0-9.\-]/g, ''));
// 转换为华氏度
const tempF = Math.trunc(tempC * 1.8 + 32);

以上操作可以避免单位后缀或者多余空格导致的转换NaN问题。

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