n の倍数で数値を丸める

現在作成し、絶賛拡散中のサービスがある。

絶賛拡散中なのだが、全く拡散されなのは横に置いておく。

そのサービスでやりたいことがあったので、調べた方法を書いてみる。

目次

特定の倍数に数値をまとめたい。

なにをいっているのだろうと思われたかもしれないので、実例をどうぞ。

実例

ユーザーが数値を入れるインプットエリアがあるとする。

ユーザーは任意の数字を入れることができる。

その結果を10の倍数にまとめたい。

つまり、24とユーザーが記入した場合は「20」が期待値になる。

ということがやりたい。

実装方法

じゃ、どうするのか。

まずは実装済みのものをどうぞ↓(うまくコンパイルできない時があるので、下の更新ボタンをクリックしてください)

inputエリアに数字を入れていくと、5で10、14で10、15で20になっていることが確認できる。

つまり24と入力すれば「20」が表示される、期待値通り。

特定の倍数に数値をまとめるコード

const changeNumber = () => {
  const unit = 10;
  const el = Math.round(num.value);
  result.value = Math.round(el / unit) * unit;
};

inputエリアのvalueが更新された時、

まずはvalueを丸める。

つまり、2は0、5は10になる。

その値を最初に定義した値(丸めたい倍数)で計算する。

実際に24が入力された時、

24を丸めて20にする。

その値を10で割って10でかける。

20 / 10 * 10 = 20

結果20になる。

なんかこうやってみるともっと簡単な方法がある?

まあ、期待値は取り出せたので、良しとする。

理系の人、ぜひ教えてください。

 

次に読むおすすめ記事

JavaScriptを使用してWordPressの投稿に目次を挿入する

Vue3のベースプロジェクトのコードを統一する

foreachの中で非同期が終わったら僕の肩を叩いてください

Vue3のベースプロジェクトを作成したので、仕上げにhuskyを導入する

今更ながら、即時関数がとでも便利でかっこいい

この記事に対するコメント

お気軽にコメントを下さい

メールアドレスが公開されることはありません。 が付いている欄は必須項目です