javascript マイナスの場合は「0」に変換する方法

javascript マイナスの場合は「0」に変換する方法

javascriptで、マイナスの場合は「0」に変換するサンプルコードを記述してます。条件式や「max」を使用することで可能です。三項演算子を使用すればコードもスッキリ記述できます。

環境

  • OS windows11 pro 64bit
  • Apache 2.4.43
  • ブラウザ chrome 108.0.5359.72

マイナスの場合は「0」に変換する方法

マイナスの場合は「0」に変換するには、条件式や「max」などを使用します。

let num = -10;

if (num < 0) num = 0;

console.log(num); // 0

num = 10;

if (num < 0) num = 0;

console.log(num); // 10

三項演算子を使用することもできます。

let num = -10;

num = num < 0 ? 0 : num;

console.log(num); // 0

num = 10;

num = num < 0 ? 0 : num;

console.log(num); // 10

他には「max」を使用する方法もあります。

let num = Math.max(-10, 0);

console.log(num) // 0

num = Math.max(10, 0);

console.log(num) // 10

サンプルコード

以下は、
「 実行 」ボタンをクリックすると、フォームに入力された値を取得してマイナスであれば「0」に変換するサンプルコードとなります。

※cssには「bootstrap material」を使用してます。関数はアロー関数で記述してます。

<!DOCTYPE html>
<html lang="ja">

<head>
  <meta charset="utf-8">
  <title>mebeeサンプル</title>
  <!-- MDB -->
  <link href="https://cdnjs.cloudflare.com/ajax/libs/mdb-ui-kit/4.2.0/mdb.min.css" rel="stylesheet" />
</head>

<body>

  <div class="container text-center w-50" style="margin-top:200px">

    <h2><span class="badge badge-info">結果</span></h2>

    <form>
      <div class="form-group">        
        <input type="text" id="setData">
      </div>
    </form>

    <button type="button" onclick="toZero()" class="btn btn-info mt-1">
      判定
    </button>

  </div>

  <script>    

    const toZero = () => {

      let obj = document.getElementsByClassName("badge")[0];

      obj.textContent = Number(setData.value) < 0 ? 0 : setData.value

    }

  </script>
</body>

</html>

変換されていることが確認できます。