Q&A
Closed
Javascriptで, "+"演算子が上手く使用できません
32 + '52' = '3252' index.js:3
const x = 32,
y = "52";
console.log(`${x} + ${y} = ${x + y}`); //32 + '52' = '3252'
// 本当は '84'(文字列) にしたい
xに.toString()をして計算したが,
" 32 + '52' = '3252' "
になってしまった
演算子 + の前後のどちらかが文字列である場合は、数値の加算ではなく文字列の連結として扱われます。
数値型に変換してから + で加算し、その結果を文字列に変換するのがいいでしょう。
const x = 32, y = "52";
console.log(`${x} + ${y} = ${(x + Number(y)).toString(16)}`); //32 + 52 = '54'
@marui-alfa
Questioner
[index.js: 4:8]は、'54' ではなく '84' でした。
console.log(
${x} + ${y} = ${x + y}); //32 + '52' = '3252'
文字列の連結の + と解釈された結果ですね。
// 本当は '54'(文字列) にしたい
数値として足し算して 84 なら理解できますが、54 とはどんな演算を期待していますか？
84 でよいなら、例えば、↓
const z = `${x + (y - 0)}`; //"84"
84 == 0x54
なるほど
const z = `0x${(x + (y - 0)).toString(16)}`; //"0x54"
@marui-alfa
Questioner
間違えました。そこは、'54' ではなく '84' でした。
これは「暗黙的な型変換」と呼ばれ、さまざまなシナリオで発生します。本書「You Don't Know JS」を読むことをお勧めします。本の中にはそれを詳しく説明した章もあります。
Here is an example, do you know what the result is?
('b' + 'a' + + 'a' + 'a').toLowerCase()
This part is the 「暗黙的な型変換」, because it runs Number("a") in the background and outputs NaN , then this script will become
('b' + 'a' + Number("a") + 'a').toLowerCase()
// the result of this part
('b' + 'a' + NaN + 'a').toLowerCase()
Then it runs String(NaN) in the background
('b' + 'a' + String(NaN) + 'a').toLowerCase()
// the result of this part
('b' + 'a' + 'NaN' + 'a').toLowerCase()
After all it will output this banana (バナナ)
したがって、この+演算子に関する問題は、暗黙的な型変換の一部です。