如何区分jQuery中+运算符的字符串拼接与数值加法功能？

首先明确：+ 是JavaScript的运算符，和jQuery无关，它的行为由操作数的类型决定：

• 当两边操作数都是数值类型时，+ 执行数值加法
• 当任意一边操作数是字符串类型时，+ 执行字符串拼接

你的代码问题分析 #

你当前代码里，$('#a').val() 获取的输入值是字符串（哪怕input设为type="number"，jQuery的val()方法返回的依然是字符串），再加上+'px'后，a和b完全变成了字符串，所以a+b必然是字符串拼接（比如输入10和10，结果是10px10px）。

修复后的代码 #

JavaScript部分 #

// 先把输入值转为数值，做加法后再拼接px
const numA = parseInt($('#a').val(), 10) || 0;
const numB = parseInt($('#b').val(), 10) || 0;
const total = numA + numB;

$('#result').html(total + 'px');

HTML部分 #

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.4/jquery.min.js" integrity="sha512-pumBsjNRGGqkPzKHndZMaAG+bir374sORyzM3uulLV14lN5LyykqNk8eEeUlUkB3U0M4FApyaHraT65ihJhDpQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
 
<input id="a" type="number" value="10">
<input id="b" type="number" value="10">
<output id="result"></output>

关键细节说明 #

• parseInt(val, 10)：把字符串转成十进制整数，第二个参数10是必须的，避免进制解析错误；如果输入空值或非数字，parseInt会返回NaN，用|| 0可以默认设为0，避免计算出错。
• 如果需要处理小数，把parseInt换成parseFloat即可。
• 务必先完成数值加法，再拼接字符串后缀（比如px），顺序不能反。

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