面试题：JavaScript 隐式类型转换与函数调用

Question

假设有如下代码：function add(a, b) { return a + b; }，当调用 `add('2', 3)` 时，解释发生了什么隐式类型转换，以及最终返回结果的原因。如果要避免这种隐式类型转换带来的潜在问题，有哪些好的编程实践？

Answer 1

1. 隐式类型转换及返回结果原因：
   • 在JavaScript中，当执行 add('2', 3) 时，由于 + 运算符在遇到字符串时，会将其他操作数转换为字符串进行字符串拼接。这里，数字 3 会隐式转换为字符串 '3'。
   • 然后进行字符串拼接，'2' + '3' 结果为 '23'。所以函数 add 返回 '23'。
2. 避免隐式类型转换的编程实践：
   • 类型检查和转换：
     • 在函数内部进行参数类型检查，例如：

function add(a, b) {
    if (typeof a ==='string') {
        a = parseFloat(a);
    }
    if (typeof b ==='string') {
        b = parseFloat(b);
    }
    return a + b;
}

• 使用严格相等运算符：在比较操作中使用 === 而不是 ==，这样可以避免不必要的类型转换导致的错误。例如，在函数外部调用时，可以进行类型检查：

function add(a, b) {
    return a + b;
}
let num1 = '2';
let num2 = 3;
if (typeof num1 === 'number' && typeof num2 === 'number') {
    console.log(add(num1, num2));
} else {
    console.log('参数类型不符合要求');
}

• 使用强类型语言特性（如果环境支持）：在一些支持类型标注的JavaScript环境（如TypeScript）中，可以使用类型标注来明确参数类型，例如：

function add(a: number, b: number): number {
    return a + b;
}
// 如果传递非数字参数，TypeScript会在编译时提示错误
add(2, 3);