JavaScript で小数をフォーマットする

Shiv Yadav 2023年10月12日
  1. JavaScript で toString() メソッドを使用して小数をフォーマットする
  2. JavaScript で toFixed() メソッドを使用して小数をフォーマットする
  3. JavaScript で toLocaleString() メソッドを使用して小数をフォーマットする
JavaScript で小数をフォーマットする

この記事では、JavaScript を使用して小数点以下の桁数をフォーマットする方法について説明します。

JavaScript でコンマと小数点以下の桁数で数値をフォーマットするには、Math.round()split() を指定された数値に使用できます。toFixed()toString()、および toLocaleString() メソッドを使用して、10 進数をフォーマットできます。

JavaScript で toString() メソッドを使用して小数をフォーマットする

JavaScript の toString() メソッドは、数値を文字列に変換し、指定された Number オブジェクトを表す文字列を返します。

<!DOCTYPE html>
<html>
  <body>
    <script>
      var numb = 45342.764;

      var valu = Math.round(Number(numb) * 100) / 100;

      var pts = valu.toString().split(".");

      var num =
        pts[0].replace(/\B(?=(\d{3})+(?!\d))/g, ",") +
        (pts[1] ? "." + pts[1] : "");

      console.log(num);
    </script>
  </body>
</html>

実行コード

.split() 関数は、特定の場所にある文字列のフラグメントを配列コンポーネントに作成します。配列コンポーネントは、コンマで区切られた一連のコンポーネントにマージされます。

出力:

"45,342.76"

関数を作成することで、toString() メソッドを使用することもできます。

 <script>
    var numb = 45342.76;
    function numbCommas(x) {
      return x.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",");
    }
    console.log(numbCommas(numb));
 </script>

実行コード

出力:

"45,342.76"

JavaScript で toFixed() メソッドを使用して小数をフォーマットする

JavaScript の toFixed() メソッドは、小数点以下 2 桁の数値をフォーマットします。toFixed() メソッドは、小数点の右側に指定された桁数で数値をフォーマットします。

正しい小数点以下の桁数の文字列表現を出力しますが、科学的記数法は使用しません。

<script>
  var number1 = 45342.764; document.write("number1 is : " + number1.toFixed(2));
  document.write("
  <br /> ");
</script>

実行コード

出力:

number1 is: 45342.76

JavaScript で toLocaleString() メソッドを使用して小数をフォーマットする

同様に、toLocaleString() メソッドを使用して、地域ごとに異なるコンマで 10 進数を区切ることができます。en-US のように、3つの位置ごとにカンマで数字を区切りますが、hi-IN は最初の 3つの位置で、次に 2つの場所ごとに区切ります。

let decNum = 4534289.764;

console.log(decNum.toLocaleString('en-US'));

console.log(decNum.toLocaleString('hi-IN'));

実行コード

出力:

"4,534,289.764"
"45,34,289.764"
著者: Shiv Yadav
Shiv Yadav avatar Shiv Yadav avatar

Shiv is a self-driven and passionate Machine learning Learner who is innovative in application design, development, testing, and deployment and provides program requirements into sustainable advanced technical solutions through JavaScript, Python, and other programs for continuous improvement of AI technologies.

LinkedIn

関連記事 - JavaScript Format