JavaScript字符串拼接参数中如何正确执行变量算术运算

问题原因：JavaScript 运算符优先级与隐式类型转换规则 #

你遇到的问题是JS的固有语法规则导致的，核心有两个关键点：

• +、-运算符优先级相同，执行顺序为从左到右
• +同时支持「算术加法」和「字符串拼接」两种逻辑，-仅支持「算术减法」，遇到非数字类型时会尝试隐式转换为数字

代码执行过程拆解 #

你给出的原始代码：

var test = 1; 
console.log("results are as such : "+ test-1 +". What we got instead is: "+ test+2 +". Astonishing!");

会按照从左到右的顺序逐段执行：

1. 首先执行 "results are as such : " + test：左侧是字符串，触发字符串拼接，得到结果 "results are as such : 1"
2. 再执行上一步结果 - 1：-会尝试把左侧字符串转成数字，转换失败得到NaN，计算结果为 NaN
3. 接下来执行 NaN + ". What we got instead is: "：右侧是字符串，触发拼接，得到结果 "NaN. What we got instead is: "
4. 依次和后续的test、2、结尾字符串拼接，最终得到你看到的 NaN. What we got instead is: 12. Astonishing!

和C#表现不同的原因 #

C#是强类型语言，不会做隐式的字符串到数字的类型转换，同时编译阶段会优先处理数值运算逻辑，所以能得到你预期的结果。

解决方案 #

如果要在JS中得到预期的运算结果，只需要给算术运算部分加括号提升执行优先级即可：

var test = 1; 
console.log("results are as such : "+ (test-1) +". What we got instead is: "+ (test+2) +". Astonishing!");

修改后运行即可输出：results are as such : 0. What we got instead is: 3. Astonishing!

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