【JavaScript】固定小数点形式に変換しよう!【toFixed】

JavaScript

みなさんこんにちは、現役エンジニアのサメハックです

アパレル企業でトップ販売員を経て
未経験からWebエンジニアに転職し、
現在正社員として5年働いています!

今回はJavaScriptで固定小数点形式に変換する方法について学んでいきましょう!

駆け出しエンジニアや未経験の方、
また新入社員を指導する先輩社員にとっても
わかりやすいように解説していきます!

この記事を読むと・・・
  • 固定小数点形式がわかる
  • 固定小数点形式への変換方法がわかる
  • 変換後の型の変更ができる
  • toFixed関数が使えるようになる
測定データの表示をする際に便利な関数だよ!

固定小数点形式とは

固定小数点形式とは、小数点が置かれる桁を固定して表された数のことです。

文字で書くとなんだかややこしく聞こえてしまいますが、
1.00 のように、小数点以下の桁数を指定する形式です。

固定小数点形式に変換しよう

toFixed関数を使おう!

JavaScriptで固定小数点形式に変換するには
toFixed関数を使います。

構文

数値.toFixed(小数点以下の桁数)

toFixed関数を使ってみよう!

ここでは 1 という数値を 1.00 という表記に変換してみましょう。

// 数値の宣言
const num = 1;

console.log(num.toFixed(2));
【出力結果】
1.00

このように変換が完了しました。

toFixedの重大な問題点

toFixed関数は便利なのですが、変換後に文字列型に変更されてしまう!
という重大な問題点があります。

・・・が!
数値の前に + を記述することで、意図せぬ型変換を回避できます。

構文

+数値.toFixed(小数点以下の桁数)

実際に確認してみましょう

// 数値の宣言
const num = 1;

console.log(num.toFixed(2));

// 型の確認
console.log(typeof(num.toFixed(2)));

// 型の確認 ※+を付与
console.log(typeof(+num.toFixed(2)));
【出力結果】
1.00
string
number

このように+の有無で型が変わることが確認できました。

型の確認を行うtypeof関数について復習したい方はこちら!

【JavaScript】型の確認をしよう!【typeof】

まとめ

  • 固定小数点形式とは、小数点が置かれる桁を固定して表された数のこと
  • 固定小数点形式に変換するにはtoFixed関数を使う
  • 数値.toFixed(小数点以下の桁数)
  • 数値の前に+を付与することで文字列型への変換を回避する
  • +数値.toFixed(小数点以下の桁数)

満足いただけたら、1クリックなのでSNSフォローしてもらえると嬉しいです🦈

タイトルとURLをコピーしました