JavaScript
 Computer >> コンピューター >  >> プログラミング >> JavaScript

JavaScriptのダブルチルダ（~~）演算子とは？Math.floor()との違いや使い方をわかりやすく解説

ダブルチルダ演算子（~~）は、ビット否定演算子（~）を2回連続で適用する書き方です。数値の小数点以下を切り捨てて整数を取得できるため、Math.floor()の代替として利用されることがあります。

多くの実行環境では、メソッド呼び出しを行うMath.floor()よりもビット演算の~~の方が高速に処理されるという特徴があります。

ダブルチルダ演算子の基本的な仕組み

単体のビット否定演算子（~）は、数値の各ビットを反転させる演算です。これを2回適用するとビットが元に戻るため、結果的に「小数部分を切り捨てた整数」が得られます。

  • ~~2.9 → 2
  • ~~5 → 5（整数はそのまま）

ただし、負の数では挙動が異なる点に注意が必要です。~~(-2.7)は-2を返すのに対し、Math.floor(-2.7)は-3を返します。これは、~~がゼロ方向へ切り捨てる（トリム）のに対し、Math.floor()がマイナス無限大方向へ切り下げるためです。

また、ビット演算は32ビット整数として処理されるため、約21億（2^31）を超える大きな数値には使用できません。安全に使いたい場合はMath.floor()を選ぶのが確実です。

サンプルコード

次のコードを実行すると、~~とMath.floor()の結果を比較できます。

<html>
   <body>
      <script>
         var a = 2;
         var b, c, d;

         b = ~~a;             // ダブルチルダで切り捨て
         c = Math.floor(a);   // Math.floor()で切り捨て
         d = ~~b === c;       // 両者が等しいか比較

         document.write(b);
         document.write("<br>" + c);
         document.write("<br>" + d); // true：両者は等しい
      </script>
   </body>
</html>

実行結果

2
2
true

このように、正の整数に対しては~~とMath.floor()が同じ結果を返すことが確認できます。パフォーマンスを重視する場面では~~、可読性や負の数への対応を重視する場面ではMath.floor()を使い分けるとよいでしょう。

  1. JavaScript DOMとは？基本の仕組みと要素の取得方法をわかりやすく解説

    JavaScriptのDOM（Document Object Model：ドキュメントオブジェクトモデル）は、Webページ上のHTML要素を表現する仕組みです。DOMはインターフェースとして機能し、ページのコンテンツやスタイルを変更することで、Webページを自由に操作できるようにします。 DOMにアクセスするには、Webページ上で右クリックして「検証（Inspect）」を選択します。すると画面の右側または左側にパネルが表示され、現在閲覧しているページのHTML要素を確認できます。要素にマウスカーソルを合わせると、ページ上の該当部分がハイライトされるため、どの要素がページのどのセクションに対応

  2. JavaScriptのビットごとのOR（|）演算子とは？使い方をわかりやすく解説

    JavaScriptにおけるビットごとのOR（|）演算子は、2つの数値を2進数のビット列として比較し、対応するビットのどちらか一方でも「1」であれば結果として「1」を返す演算子です。両方のビットが「0」の場合のみ、結果は「0」になります。ビットOR演算の基本ルールビットごとのOR演算は、以下のようなルールで各ビットが評価されます。0 | 0 → 00 | 1 → 11 | 0 → 11 | 1 → 1サンプルコード以下のコードを実行すると、JavaScriptのビットごとのOR（|）演算子の動作を確認できます。この例では、「7」と「1」をOR演算しています。<!DOCTYPE html&