はじめに
Vue.js公式サイトの実装例を見ていたところ、以下のプログラムがありました。
<script setup>
import { ref } from 'vue'
const c = ref(0)
const f = ref(32)
// ここで+e.target.valueが出てくる！
function setC(e, v = +e.target.value) {
c.value = v
f.value = v * (9 / 5) + 32
}
function setF(e, v = +e.target.value) {
f.value = v
c.value = (v - 32) * (5 / 9)
}
</script>
<template>
<input type="number" :value="c" @change="setC"> Celsius =
<input type="number" :value="f" @change="setF"> Fahrenheit
</template>
ここでv = +e.target.valueというコードがあります。
ん？ v += e.target.valueなら見たことがあるけど、この+は何？？
+を取り除いてv = e.target.valueにしても動作は変わらないし...と思って調べました。
単項プラス演算子
結論から言うと、この+は単項プラス演算子といい、数値への変換に使われています。
今回のコードでは、e.target.valueで受け取った値は"32"のような文字列なので、+e.target.valueとすることで数値に変換しています。
なぜ+を取り除いても動作が変わらなかったのか？
+を取り除いても動作が変わらなかったのは、Vue.jsが<input type="number">の場合に自動で数値として型変換してくれるためです。
また、Vue.jsでなくとも、JavaScriptの暗黙の型変換で文字列を数値に変換してくれて上手くいく場合もあります。
今回の場合ですと、v * (9 / 5) + 32や(v - 32) * (5 / 9)は暗黙の型変換が行われています。
ただ、バグを防げるので明示的に型変換した方が望ましいです。
他の型変換方法
Number(e.target.value)でも数値への型変換は可能です。
こちらの方が一般的ですし、一目見て「数値に変換しているんだ」とわかりやすいので、正直こちらの方が良いと思います。
おわりに
+自体はVueの特殊機能ではなくJavaScriptの単項プラス演算子でした。
なぜ+がなくても正常に動作するのか？については、Vueの機能によるものでした。
参考