下記URLと全く同じ状況で詰まってたのでその記録。
参考:https://teratail.com/questions/373
つまるところ
【数列】+ 【数列】 + 【数列】= 【数列】;
なんだけど、
【文字列】+ 【数列】 + 【数列】= 【文字列】;
だとこうなるよって話。
別件でDOM操作してて、valueの値を全く弄れなくて悩んでたら
文字列と数列の違いが原因だった。
この二つは見た目一緒でも、扱われ方は全然違うらしい。
よく見るとコンソールでも色が違かった。

ついでに型変換方法まとめ
動的な型変換
数列>文字列
const num = 123;
const result1 = num.toString();
const result2 = String( num );
console.log( result1 ); //"123"
console.log( typeof result1 ); //string
console.log( result2 ); //"123"
console.log( typeof result2 ); //string
文字列>数字
const num = 123;
const result1 = Number( str );
const result2 = parseInt( str );
console.log( result1 ); //"123"
console.log( typeof result1 ); //number
console.log( result2 ); //"123"
console.log( typeof result2 ); //number
暗黙的な型変換
暗黙的な型変換 = 動的な型変換がに対して、明示的に書かなくても行われる型変換。
console.log(1 + "2"); // => "12"
console.log(1 - "2"); // => -1
const x = 1, y = "2", z = 3;
console.log(x + y + z); // => "123"
console.log(y + x + z); // => "213"
console.log(x + z + y); // => "42"
つまり・・・
- 「ー」の時は文字列が数列になる。
- ”先に演算”されてると、文字列も数列として扱われる。
として理解。