やりたいこと
input入力欄に3と入力されたら300万にしてAPIに送りたい。
桁数が大きいデータを扱うときにフロントでは桁数を少なく表示したい。一方でAPIに送る情報には元の数値を入れて送る
実装メモ
<input type='text' name='name'/>
const getInputValue = ():string => {
const target = document.querySelector("input[name=name]");
return target.value;
}
inputで入力された値を取ってくるgetInputValue関数を作ります。
getInputValue関数の返り値はstringで返ってくる想定です。
inputで入力された数値を100万単位にする関数
const changeToMillion = ():number => {
const normalValue = getInputValue();
const millionValue = parseInt(normalValue,10)*1e6;
return millionValue;
}
次にgetInputValue関数で取ってきた値を、changeToMillion関数で100万単位に変換します。
1e6
は10の6乗を意味します。
今回は100万単位にしますが、乗数を変えることで億単位等に変更することも可能です。
1e7:1000万,
1e8:1億...等
eの後の数字を変更すればさまざまな桁に対応できます。ここでのe は 10 のべき乗を表します。