JavaScript缩短数字累加代码：避免字符串拼接错误的简洁写法

你遇到的问题很典型——innerHTML返回的是字符串类型，所以直接用+= 10会触发字符串拼接而非数字加法。这里有几种既简洁又正确的写法，兼顾可读性和代码长度：

1. 用一元加号快速转数字（推荐，最简洁） #

先把DOM元素存成变量，避免重复调用getElementById（既高效又简洁）：

const numElement = document.getElementById('numbers');
numElement.innerHTML = +numElement.innerHTML + 10;

这里的+是一元加号运算符，能快速将字符串形式的数字转换为数值类型，针对纯整数场景的效果和parseInt一致，但写法更短。

2. 使用Number()函数转换 #

如果觉得一元加号不够直观，用Number()函数也是不错的选择：

const numElement = document.getElementById('numbers');
numElement.innerHTML = Number(numElement.innerHTML) + 10;

3. 极简一行写法（不推荐牺牲可读性） #

如果追求极致简短，也可以写成一行，但不建议在正式代码中这么用——重复获取DOM节点会降低性能，可读性也稍差：

document.getElementById('numbers').innerHTML = +document.getElementById('numbers').innerHTML + 10;

为什么原来的写法会失败？ #

document.getElementById('numbers').innerHTML返回的是字符串"10"，当你执行+=10时，JS会自动把数字10转为字符串"10"，然后执行拼接操作，最终得到"10"+"10"="1010"，这就是你看到的结果。

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