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

JavaScriptで数値の絶対値を取得する方法｜Math.abs()の使い方を解説

JavaScriptで数値の絶対値を取得するには、Math.abs()メソッドを使用します。絶対値とは、数直線上でその数が原点（0）からどれだけ離れているかを表す値であり、負の数を渡すと正の数に変換され、正の数はそのままの値が返されます。

Math.abs()のパラメータ

abs()メソッドがサポートするパラメータは以下の1つだけです。

  • x − 絶対値を求めたい数値

基本的な使い方

次のコードは、Math.abs()を使って負の数、null、正の数それぞれの絶対値を取得する例です。

<html>
   <head>
      <title>JavaScript Math abs() Method</title>
   </head>

   <body>
      <script>
         var value = Math.abs(-10);
         document.write("First Test Value : " + value);

         var value = Math.abs(null);
         document.write("<br />Second Test Value : " + value);

         var value = Math.abs(20);
         document.write("<br />Third Test Value : " + value);
      </script>
   </body>
</html>

実行結果

First Test Value : 10
Second Test Value : 0
Third Test Value : 20

このように、-10を渡すと10が返され、nullは数値コンテキストでは0として扱われるため0が返り、正の数20はそのまま20が返されます。

補足：さまざまな値に対する挙動

Math.abs()は、引数に渡す値によって次のように動作します。

  • 負の数 → 正の数に変換して返す（例：Math.abs(-7.5) は 7.5）
  • null → 0 を返す
  • 空文字列（""） → 0 を返す
  • 数値形式の文字列 → 数値に変換して絶対値を返す（例：Math.abs("-5") は 5）
  • undefined や数値に変換できない文字列 → NaN を返す

現代的なコードでの注意点

サンプルコードで使われている document.write() は現在では非推奨とされています。実際の開発では、デバッグ時に console.log() を使うのが一般的です。

console.log(Math.abs(-10)); // 10
console.log(Math.abs(null)); // 0
console.log(Math.abs(20));   // 20

このようにMath.abs()は非常にシンプルなメソッドですが、数値処理や差分の計算など、さまざまな場面で活用できる便利な関数です。

  1. JavaScriptでリンクのtype属性の値を取得する方法

    JavaScriptでリンク（アンカー要素）のtype属性の値を取得するには、typeプロパティを使用します。type属性は、リンク先のドキュメントがHTML（text/html）なのか、CSS（text/css）なのかといった、リソースの種類（MIMEタイプ）を示すために使われる属性です。この属性の値は、JavaScriptから簡単に読み取ることができます。サンプルコード以下のコードを実行すると、リンクのtype属性の値を取得して画面に表示できます。<!DOCTYPE html> <html>    <body>   &nbs

  2. JavaScriptでリンクのtarget属性の値を取得する方法

    JavaScriptでリンク（アンカー要素）のtarget属性の値を取得するには、targetプロパティを使用します。target属性は、リンク先のドキュメントをどこに表示するかを指定するための属性です。たとえば、同じウィンドウで開くのか、新しいウィンドウや新しいタブで開くのか、あるいは特定のフレーム内に表示するのかなどを制御できます。よく使われる値としては、現在のページを保持したまま新しいタブで開く「_blank」などがあります。サンプルコード以下のコードを実行すると、リンクのtarget属性の値を取得して画面に表示できます。<!DOCTYPE html> <html>