为何JavaScript字符串可相乘却不能直接相加？BMI计算器问题解惑

开发BMI计算器时，从输入框获取用户输入：

• id为imperialHeightFt的输入值为5
• id为imperialHeightIn的输入值为5

期望计算后imperialHeight的值为65，但实际得到605。原始代码如下：

// 用户输入：id为imperialHeightFt的输入值是5
// 用户输入：id为imperialHeightIn的输入值是5

let imperialHeight = (imperialHeightFt.value * 12) + imperialHeightIn.value;

执行逻辑为：5 * 12 = 60，随后'60' + '5' = '605'。修改为以下代码后得到预期值65：

let imperialHeight = (imperialHeightFt.value * 12) + (imperialHeightIn.value * 1);

这是由JavaScript的运算符类型转换规则决定的，不同运算符对字符串的处理逻辑完全不同：

• 乘法（*）等算术运算符：
  当*、/、-这类算术运算符遇到字符串时，会自动触发数值转换，把字符串尝试转为数字后再执行运算。比如'5' * 12中，字符串'5'会被转为数值5，最终算出60。

• 加法（+）运算符：
  +是JS里的特殊运算符，同时承担算术加法和字符串拼接两种功能。它的优先级规则是：只要任意一个操作数是字符串，就会优先执行字符串拼接——把另一个操作数转为字符串后再拼接。
  你原始代码里，(imperialHeightFt.value * 12)的结果是数值60，但和imperialHeightIn.value（字符串'5'）相加时，JS会把数值60转为字符串'60'，再和'5'拼接成'605'。

你修改后的代码里，imperialHeightIn.value * 1利用乘法的自动转换特性，把字符串'5'转为数值5，此时加法的两个操作数都是数值，就会执行算术加法得到65。

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