JavaScript计算几何周长时变量字符串拼接无法数值求和问题求解

周长计算出现字符串拼接，来自两个类型转换的逻辑问题：

1. 输入框DOM对象的.value属性默认返回字符串类型，虽然乘法*、除法/运算会触发JS隐式类型转换，自动把字符串转成数字计算，但+运算符遇到字符串时会优先执行字符串拼接，而非数值加法。
2. 计算过程中调用的toFixed(4)方法返回值是字符串类型，进一步导致后续加法运算按字符串规则执行。

额外提示：现有代码里直角三角形的边长计算存在公式错误，已知斜边和一条直角边求另一条直角边时，应该是斜边平方减直角边平方再开平方，原有代码写为加法，计算出的边长结果是错误的。

• 从输入框取值时，第一时间显式转为数值类型，推荐用Number()或parseFloat()做转换，从源头避免字符串参与加法运算。
• 把toFixed(4)的格式化操作移到所有计算完成之后，计算全程保持变量为数值类型，仅在最后赋值给输入框、拼接展示文本时再做小数位截断。
• 修正直角三角形求边的错误公式。

else if (x == 3) {
    // 取值时统一转数值，空值标记为null方便分支判断
    const val1 = p1.value.trim() === '' ? null : Number(p1.value);
    const val2 = p2.value.trim() === '' ? null : Number(p2.value);
    const val3 = p3.value.trim() === '' ? null : Number(p3.value);

    // 场景：已知两条直角边a、b，求斜边c
    if (val3 === null) {
        let a2 = val1;
        let b2 = val2;
        let c2 = Math.sqrt(a2 * a2 + b2 * b2);
        let P33 = a2 * b2 / 2;
        let O33 = a2 + b2 + c2;
        // 所有计算完成后再做小数格式化
        document.getElementById("rezultat").innerHTML = `P = ${P33.toFixed(4)}<br> O= ${O33.toFixed(4)}`;
        p3.value = c2.toFixed(4);
    } 
    // 场景：已知直角边a、斜边c，求直角边b（已修正原公式的加法错误）
    else if (val2 === null) {
        let a2 = val1;
        let c2 = val3;
        let b2 = Math.sqrt(c2 * c2 - a2 * a2);
        let P32 = a2 * b2 / 2;
        let O32 = a2 + b2 + c2;
        document.getElementById("rezultat").innerHTML = `P = ${P32.toFixed(4)}<br> O= ${O32.toFixed(4)}`;
        p2.value = b2.toFixed(4);
    } 
    // 场景：已知直角边b、斜边c，求直角边a（已修正原公式的加法错误）
    else if (val1 === null) {
        let b2 = val2;
        let c2 = val3;
        let a2 = Math.sqrt(c2 * c2 - b2 * b2);
        let P31 = a2 * b2 / 2;
        let O31 = a2 + b2 + c2;
        document.getElementById("rezultat").innerHTML = `P = ${P31.toFixed(4)}<br> O= ${O31.toFixed(4)}`;
        p1.value = a2.toFixed(4);
    }
}

• 三个分支的计算、展示逻辑高度重复，可以抽成公共计算函数，减少冗余代码，后续维护修改逻辑只需要调整一处。
• 增加输入合法性校验：判断用户输入的是否为大于0的有效数字，避免输入字母、负数、0时出现NaN或者不符合几何规则的计算结果。
• 增加异常判断：比如已知两边求第三边时，如果斜边长度小于直角边，要给出错误提示，而不是直接输出无效计算值。

内容的提问来源于stack exchange，提问作者Dominik Antonio Sajko