toFixed() メソッドを使いこなす！JavaScriptで数値を2桁表示

2024-04-02

JavaScriptで浮動小数点数を常に2桁表示する方法

toFixed() メソッドは、数値を指定された桁数まで四捨五入して文字列に変換します。

const num = 3.1415926535;
const formattedNum = num.toFixed(2); // "3.14"

console.log(formattedNum); // 3.14

この方法はシンプルで使いやすいですが、数値が負の場合、負号が省略されることに注意が必要です。

Number.prototype.toLocaleString() メソッドは、数値をロケールに基づいて書式設定された文字列に変換します。

const num = 3.1415926535;
const formattedNum = num.toLocaleString('ja-JP', {
  minimumFractionDigits: 2,
  maximumFractionDigits: 2,
}); // "3.14"

console.log(formattedNum); // 3.14

この方法は、ロケールに基づいて小数点記号や桁区切り記号を指定できるため、国際的な環境で使いやすいです。

Intl.NumberFormat オブジェクトは、数値をロケールに基づいて書式設定するためのオブジェクトです。

const num = 3.1415926535;
const numberFormat = new Intl.NumberFormat('ja-JP', {
  minimumFractionDigits: 2,
  maximumFractionDigits: 2,
});
const formattedNum = numberFormat.format(num); // "3.14"

console.log(formattedNum); // 3.14

この方法は、より細かい書式設定が可能です。

ライブラリを使う

numeral.jsやaccounting.jsなどのライブラリを使うと、より簡単に数値をフォーマットできます。

const numeral = require('numeral');

const num = 3.1415926535;
const formattedNum = numeral(num).format('0.00'); // "3.14"

console.log(formattedNum); // 3.14

ライブラリを使うと、コード量を減らすことができ、複雑な書式設定も容易になります。

JavaScriptで浮動小数点数を常に2桁表示するには、いくつかの方法があります。それぞれの方法の特徴を理解して、目的に合った方法を選びましょう。

toFixed() メソッドを使う

const num = 3.1415926535;
const formattedNum = num.toFixed(2); // "3.14"

console.log(formattedNum); // 3.14

Number.prototype.toLocaleString() メソッドを使う

const num = 3.1415926535;
const formattedNum = num.toLocaleString('ja-JP', {
  minimumFractionDigits: 2,
  maximumFractionDigits: 2,
}); // "3.14"

console.log(formattedNum); // 3.14

Intl.NumberFormat オブジェクトを使う

const num = 3.1415926535;
const numberFormat = new Intl.NumberFormat('ja-JP', {
  minimumFractionDigits: 2,
  maximumFractionDigits: 2,
});
const formattedNum = numberFormat.format(num); // "3.14"

console.log(formattedNum); // 3.14

ライブラリを使う

const numeral = require('numeral');

const num = 3.1415926535;
const formattedNum = numeral(num).format('0.00'); // "3.14"

console.log(formattedNum); // 3.14

上記のサンプルコードは、ブラウザやNode.jsなどの環境で実行できます。
コードを実行する前に、必要なライブラリをインストールする必要があります。
詳細については、各方法のドキュメントを参照してください。

JavaScriptで浮動小数点数を常に2桁表示する他の方法

テンプレートリテラルを使うと、文字列の中に数値を埋め込むことができます。

const num = 3.1415926535;
const formattedNum = `${num.toFixed(2)}`; // "3.14"

console.log(formattedNum); // 3.14

関数を使うと、数値をフォーマットする処理を再利用できます。

function formatNumber(num) {
  return num.toFixed(2);
}

const num = 3.1415926535;
const formattedNum = formatNumber(num); // "3.14"

console.log(formattedNum); // 3.14

第三者ライブラリを使う

const numeral = require('numeral');

const num = 3.1415926535;
const formattedNum = numeral(num).format('0.00'); // "3.14"

console.log(formattedNum); // 3.14