JavaScriptで数字を指定した桁数(精度)で出力するtoPrecisionメソッドの使い方

JavaScriptで数字を指定した桁数(精度)で出力するにはtoPrecisionメソッドが便利です。

例えば、10秒を小数点2桁付与して10.00秒みたいな精度で出力する時に使用します。

構文

メソッド意味返り値
数値.toPrecision([桁数(省略時は0)])) 数字を指定桁数の精度にする文字列
toPrecision()メソッド

サンプルコード

今回は現在の月を取得して、それに対して精度を付与します。月は整数ですが、toPrecisionを実行することで、小数点も出力されるのを確認できます。

Output
toPrecision()
toPrecision( 2 )
toPrecision( 3 )
toPrecision( 4 )
Pug
.container.my-5
	div#timer
		div#second
	table.table
		tr
			th toPrecision()
			td#test_result1
		tr
			th toPrecision( 2 )
			td#test_result2
		tr
			th toPrecision( 3 )
			td#test_result3
		tr
			th toPrecision( 4 )
			td#test_result4
CSS
#test_result1 {
	width: 100px;
}
JavaScript
/* テキストエリア */
const elapsedTimeText1 = document.getElementById( 'test_result1' );
const elapsedTimeText2 = document.getElementById( 'test_result2' );
const elapsedTimeText3 = document.getElementById( 'test_result3' );
const elapsedTimeText4 = document.getElementById( 'test_result4' );
/*現在の月を取得*/
const Month = new Date().getMonth() + 1;
elapsedTimeText1.textContent = ( Month ).toPrecision();
elapsedTimeText2.textContent = ( Month).toPrecision( 2 );
elapsedTimeText3.textContent = ( Month ).toPrecision( 3 );
elapsedTimeText4.textContent = ( Month ).toPrecision( 4 );

本来なら小数点が必要ない整数に対しても、小数点を付与されているのを確認できます。

インストラクター
コメント

コメントを残す