常に小数点以下2桁を表示するフォーマット番号


783

常に小数点以下2桁を表示するように数値をフォーマットします(該当する場合は丸めます)。

例:

number     display
------     -------
1          1.00
1.341      1.34
1.345      1.35

私はこれを使用しています:

parseFloat(num).toFixed(2);

しかし、ではなく1として表示されています。11.00


2
つまり、1と入力しても1.00とは表示されませんが、1.345と入力すると1.35と表示されます
Varada

1
私はあなたの質問をあなたが探していたと私が思うものに書き換えました。私があなたを正しく理解していることを確認してください。
11年

ieサポート付きの正確な丸め。gist.github.com/ArminVieweg/28647e735aa6efaba401
TarranJones


回答:


1117
(Math.round(num * 100) / 100).toFixed(2);

ライブデモ

小数点以下2桁に丸められるため、入力1.346はを返すことに注意してください1.35


6
@Kooilnc:OPが望んでいる1ように表示すること1.00、および1.341として表示します1.34
11年

49
toFixed()は四捨五入するため、round()を使用する必要はありません。
MilanBabuškov13年

27
toFixed()はそれを丸めますが、文字列を返すことを忘れないでください...したがって、このメソッドは本当に表示にのみ役立ちます。丸められた値に対してさらに数学的計算を実行する場合は、toFixed()を使用しないでください。
TWright

8
MDNによると、Math.roundは、丸め誤差のために常に正確な結果を提供するとは限りません。私はこれを1.005でテストしましたが、これは1.01に丸める必要がありますが、1.00になります。一貫した正確さのために私の答えを使用してください:stackoverflow.com/a/34796988/3549440
ネイト

13
この全体の答えは、に削減できます(+num).toFixed(2)。元の丸めのバグも保持されますネイトの回答を参照してください。
RobG 2017

322
Number(1).toFixed(2);         // 1.00
Number(1.341).toFixed(2);     // 1.34
Number(1.345).toFixed(2);     // 1.34 NOTE: See andy's comment below.
Number(1.3450001).toFixed(2); // 1.35


1
最後の行は偽です。Chromeコンソールでこれを試してみたところ、「Number(1.365).toFixed(2)が「1.37」を返します
Andre

1
@ Andre、Chrome 29.0.1547.57は私1.34に表現を与えてくれますNumber(1.345).toFixed(2)
Drew Noakes 2013

1
toFixed 丸めを行います。これは、ほとんどすべてのテスト番号で確認できます。
アンディ2013年

40
終了する前に最後のコメントを誤って送信した.. 1.345は、浮動小数点に正確に格納できない数値の例であるため、期待どおりに四捨五入されない理由は、実際にはわずかに数値として格納されているためだと思います1.345未満で切り捨てられます。代わりにを使用してテストすると(1.34500001).toFixed(2)、正しく切り上げられることがわかります1.35
andy

94

次の場合、この回答は失敗しますvalue = 1.005

より良い解決策として、指数表記で表された数値を使用することにより、丸めの問題を回避できます。

Number(Math.round(1.005+'e2')+'e-2'); // 1.01

@Konと元の作者が提案したよりクリーンなコード:

Number(Math.round(parseFloat(value + 'e' + decimalPlaces)) + 'e-' + decimalPlaces)

toFixed()小数点を保持するために最後に追加でき1.00ます。例:ただし、文字列として返されることに注意してください。

Number(Math.round(parseFloat(value + 'e' + decimalPlaces)) + 'e-' + decimalPlaces).toFixed(decimalPlaces)

クレジット:JavaScriptでの小数の丸め


13
驚くべきことに、ここの他の誰もtoFixedがその丸めの問題があることを確認できませんでした。あなたの答えは受け入れられたものでなければなりません。
アームフット

1
これがまだ当てはまるかどうかを確認するためにテストしました。あなたはまだChromeバージョン59.0.3071.115に対して正しいですソリューションは1.005(1.01)に切り上げ、1.00499999(1.00)に
切り捨てます

jsfiddle.net/Artistan/qq895bnp/28 toFixed が機能する「時間」はありますが、非常に一貫性がありません。:)
Artistan

parseFloatはサラウンド数は、その戻った文字列である
user889030

1
これは確かな答えです。私が考えることができるいくつかの改善点:(1)VSコード(TypeScriptファイル)は、文字列を渡すMath.round()が好きではありません。(2)小数点以下の桁数を動的にします(2にハードコードされていません)。(3)toFixed()は不要のようです。だから私が思いついたのはNumber(Math.round(parseFloat(value + 'e' + decimalPlaces)) + 'e-' + decimalPlaces)
Kon

23
var num = new Number(14.12);
console.log(num.toPrecision(2));//outputs 14
console.log(num.toPrecision(3));//outputs 14.1
console.log(num.toPrecision(4));//outputs 14.12
console.log(num.toPrecision(5));//outputs 14.120

その結果、予期しない結果が得られます。数値が1.4、23.654、および0の場合、どの程度の精度をとりますか?
しんぞう2016年

2
OPが「該当する場合の丸め」を要求していることに注意してください。toPrecision数値を特定の小数点以下の桁数にフォーマットするだけで、冗長な桁は省略しますが、四捨五入はしません。もちろん、これも非常に役立ちますが、違いを理解することが重要です。
Boaz-2016年

1
Mozillaによると、実際にはtoPrecisionは丸めます。テスト:(20.55).toPrecision(3) "20.6"
James L.17年

2
あなたがしたい場合は末尾のゼロを取り除き、使用後に番号またはフロートにキャストtoFixedconst formattedVal = Number(val.toFixed(2));Doが使用しないtoPrecision、高精度のparamを使用している場合、それは非小数をカウントして。
ジェームズL.17年

17

最も正確な丸めのために、次の関数を作成します。

function round(value, decimals) {
    return Number(Math.round(value +'e'+ decimals) +'e-'+ decimals).toFixed(decimals);
}

小数点以下2桁に丸めるために使用します。

console.log("seeked to " + round(1.005, 2));
> 1.01

おかげRazuこの記事、およびMDNの恐らくMath.round参照


1
1.0049999999999998934はどうですか?
4esn0k

1
2 dpを超えない
スティーブンアデラクン

1
jsfiddle.net/Artistan/qq895bnpをテストしたところ、これは私が見た唯一の一貫した方法です。ありがとう。
アルティザン2017

17

最新のブラウザでは、 toLocaleString

var num = 1.345;
num.toLocaleString(undefined, { maximumFractionDigits: 2, minimumFractionDigits: 2 });

ロケールタグを最初のパラメータとして指定して、 小数点記号。ドットには、たとえば英語のUSロケールを使用します。

num.toLocaleString("en-US", { maximumFractionDigits: 2, minimumFractionDigits: 2 });

それは与える:

1.35

ヨーロッパのほとんどの国ではカンマを小数点記号として使用しているため、たとえばスウェーデン語/スウェーデン語ロケールを使用する場合は、次のようになります。

num.toLocaleString("sv-SE", { maximumFractionDigits: 2, minimumFractionDigits: 2 });

それは与えるでしょう:

1,35


なぜこれが反対票であるかはわかりませんが、私にはうまく機能しているようです。これに問題がある場合に反対票を投じる場合は、コメントを追加してください!
John Culviner

13

最も簡単な答え:

var num = 1.2353453;
num.toFixed(2); // 1.24

例:http : //jsfiddle.net/E2XU7/


11
まあ、toFixed既にstackoverflow.com/a/13292833/218196で提案されていました。あなたの質問はどのような追加情報を提供しますか?
Felix Kling 2013

その回答にはラウンド機能は含まれていませんが、私の回答にはthoが含まれています。
macio.Jun 2013

8
え?それはまったく同じ答えです。toFixed番号を呼び出す。
Felix Kling

1
正しい、同じ機能ですが、その答えの結果は誤解を招きやすいので、丸い機能を表現することで修正しました。
macio.Jun

質問は、「...該当する場合は丸めます」と述べています。あなたの答えは丸めを含みません。
Chris

12

N桁に丸めるためのはるかに一般的なソリューション

function roundN(num,n){
  return parseFloat(Math.round(num * Math.pow(10, n)) /Math.pow(10,n)).toFixed(n);
}


console.log(roundN(1,2))
console.log(roundN(1.34,2))
console.log(roundN(1.35,2))
console.log(roundN(1.344,2))
console.log(roundN(1.345,2))
console.log(roundN(1.344,3))
console.log(roundN(1.345,3))
console.log(roundN(1.3444,3))
console.log(roundN(1.3455,3))

Output

1.00
1.34
1.35
1.34
1.35
1.344
1.345
1.344
1.346

1
このalswerは0に近い特定の数値で失敗し、期待される0.00 でroundN(-3.4028230607370965e+38,2)"-3.4028230607370965e+38"なく戻ります
Ferrybig

興味深い@Ferrybigは、あなたが言及した数値をテストし、回避策について考えます。テストをありがとう
PirateApp

1
前述の数値はゼロではなく、非常に大きい数値を示すべきであることに注意してください。これは私の脳の単なるエラーでした。しかし、それでも小数点以下2桁が表示されないため、機能しません
Ferrybig


9

すでにjQueryを使用している場合は、jQuery数値形式プラグインの使用を確認できます。

プラグインは、フォーマットされた数値を文字列として返すことができ、小数と桁区切り記号を設定でき、表示する小数を選択できます。

$.number( 123, 2 ); // Returns '123.00'

GitHubからjQuery数値形式を取得することもできます


11
「固定長の小数部を持つためだけに」プラグインを使用するのはやり過ぎです。
Lashae 2013

9
@Lashae、確かに、それがあなたがやりたいことすべてなら。OPや他の誰かがプラグインが提供する追加の機能も望んでいた場合に備えて、これを投稿しました。
サムSehnert 2013

質問の投稿者がもちろんjQueryタグを追加した場合;)
fullstacklife '30年

7

これはどういう意味ですか?

function showAsFloat(num, n){
      return !isNaN(+num) ? (+num).toFixed(n || 2) : num;
}

document.querySelector('#result').textContent = 
    [
     'command                      | result',
     '-----------------------------------------------',
     'showAsFloat(1);              | ' + showAsFloat(1),
     'showAsFloat(1.314);          | ' + showAsFloat(1.314),
     'showAsFloat(\'notanumber\')    | ' + showAsFloat('notanumber'),
     'showAsFloat(\'23.44567\', 3)   | ' + showAsFloat('23.44567', 3),
     'showAsFloat(2456198, 5)      | ' + showAsFloat('2456198', 5),
     'showAsFloat(0);              | ' + showAsFloat(0)
    ].join('\n');
<pre id="result"></pre>


6

小数点以下2桁のみを保持して、数値を文字列に変換します。

var num = 5.56789;
var n = num.toFixed(2);

nの結果は次のようになります。

5.57

4

床をお探しですか?

var num = 1.42482;
var num2 = 1;
var fnum = Math.floor(num).toFixed(2);
var fnum2 = Math.floor(num2).toFixed(2);
alert(fnum + " and " + fnum2); //both values will be 1.00

4
私は彼が最も近い整数に切り捨てたいとは思わない。
11年

ええ、私は説明から確信が持てませんでしたが、ちょうどそれを
ケースに入れ

3
function currencyFormat (num) {
    return "$" + num.toFixed(2).replace(/(\d)(?=(\d{3})+(?!\d))/g, "$1,")
}

console.info(currencyFormat(2665));   // $2,665.00
console.info(currencyFormat(102665)); // $102,665.00

3

以下は、小数点以下の任意の桁数にフォーマットできる汎用関数です。

function numberFormat(val, decimalPlaces) {

    var multiplier = Math.pow(10, decimalPlaces);
    return (Math.round(val * multiplier) / multiplier).toFixed(decimalPlaces);
}

3

特定のフォーマットが必要な場合は、独自のルーチンを作成するか、必要なことを行うライブラリ関数を使用する必要があります。基本的なECMAScript機能は、通常、フォーマットされた数値を表示するには不十分です。

丸めとフォーマットの詳細な説明はこちらです:http : //www.merlyn.demon.co.uk/js-round.htm#RiJ

原則として、丸めとフォーマットは、出力前の最後のステップとしてのみ実行する必要があります。これを早期に行うと、予期しない大きなエラーが発生し、フォーマットが破壊される可能性があります。


このJS / Ecmaプラットフォーム全体の後半に深く関与するために、自分の選択で頭を振るときがあります。:(「特定の書式設定が必要な場合は、独自のルーチンを作成するか、必要なことを行うライブラリ関数を使用する必要があります。基本的なECMAScript機能は、通常、書式設定された数値を表示するには不十分です。」しかし、その事実が存在するためです。ただ悲しいです。ボールに乗ってください、JavaScript!:)
ChrisH

2

function number_format(string,decimals=2,decimal=',',thousands='.',pre='R$ ',pos=' Reais'){
  var numbers = string.toString().match(/\d+/g).join([]);
  numbers = numbers.padStart(decimals+1, "0");
  var splitNumbers = numbers.split("").reverse();
  var mask = '';
  splitNumbers.forEach(function(d,i){
    if (i == decimals) { mask = decimal + mask; }
    if (i>(decimals+1) && ((i-2)%(decimals+1))==0) { mask = thousands + mask; }
    mask = d + mask;
  });
  return pre + mask + pos;
}
var element = document.getElementById("format");
var money= number_format("10987654321",2,',','.');
element.innerHTML = money;
#format{
display:inline-block;
padding:10px;
border:1px solid #ddd;
background:#f5f5f5;
}
<div id='format'>Test 123456789</div>


2

以下の私の解決策は、この最も長いスレッドの1つにぶつかるだけです。

parseFloat(Math.round((parseFloat(num * 100)).toFixed(2)) / 100 ).toFixed(2)

誰かが穴を突くことができるかどうか教えてください


2


2
このコードは、要件を達成するのに十分です parseFloat(num.toFixed(2))
kva

1

あなたは私たちに全体像を与えていません。

javascript:alert(parseFloat(1).toFixed(2))ロケーションバーに貼り付けると、ブラウザに1.00と表示されます。ただし、後で何かをすると、元に戻ります。

var num = 2
document.getElementById('spanId').innerHTML=(parseFloat(num).toFixed(2)-1)


shows 1 and not 1.00

FF 50、Chrome 49、IE 8で動作
Florian Straub 2017年


1

toFixed()を呼び出す前に、parseFloat()変換とNumber()変換のどちらかを決定する必要がありました。これは、数値フォーマット後のキャプチャ後のユーザー入力の例です。

HTML:

<input type="number" class="dec-number" min="0" step="0.01" />

イベントハンドラー:

$('.dec-number').on('change', function () {
     const value = $(this).val();
     $(this).val(value.toFixed(2));
});

上記のコードではTypeError例外が発生します。html入力タイプは「数値」ですが、ユーザー入力は実際には「文字列」データタイプであることに注意してください。ただし、toFixed()関数は、Numberであるオブジェクトに対してのみ呼び出すことができます。

最終的なコードは次のようになります。

$('.dec-number').on('change', function () {
     const value = Number($(this).val());
     $(this).val(value.toFixed(2));
});

Number()とparseFloat()を使用してキャストするほうがよい理由は、空の入力文字列やNaN値のどちらについても追加の検証を実行する必要がないためです。Number()関数は自動的に空の文字列を処理し、それをゼロに変換します。


0

ほんとに好き:

var num = 12.749;
parseFloat((Math.round(num * 100) / 100).toFixed(2)); // 123.75

数値を小数点以下2桁で四捨五入してから、それを解析してparseFloat() 、StringではなくNumberを返すようにしてください。StringとNumberのどちらでもかまいません。


小数点以下2桁の精度で表示することが目的だったとしたら、フロートを解析すると混乱するでしょう。例:parseFloat("1.00") // 1
Stijn de Witt 2017

0

高精度メソッドを使用してMathオブジェクトを拡張する

Object.defineProperty(Math, 'precision',{
   value: function (value,precision,type){
             var v = parseFloat(value),
                 p = Math.max(precision,0)||0,
                 t = type||'round';
              return (Math[t](v*Math.pow(10,p))/Math.pow(10,p)).toFixed(p);
          }
    });

console.log(
    Math.precision(3.1,3), // round 3 digits 
    Math.precision(0.12345,2,'ceil'), // ceil 2 digits
    Math.precision(1.1) // integer part
)



0

これは、床のみを使用して丸める別の解決策です。つまり、計算された金額が元の金額よりも大きくならないようにします(トランザクションに必要な場合があります)。

Math.floor(num* 100 )/100;

0

あなたはこのコードを試すことができます:

    function FormatNumber(number, numberOfDigits = 2) {
        try {
            return new Intl.NumberFormat('en-US').format(parseFloat(number).toFixed(2));
        } catch (error) {
            return 0;
        }
    }

    var test1 = FormatNumber('1000000.4444');
    alert(test1); // 1,000,000.44

    var test2 = FormatNumber(100000000000.55555555, 4);
    alert(test2); // 100,000,000,000.56

0

以下のコードを試してください:

function numberWithCommas(number) { 

   var newval = parseFloat(Math.round(number * 100) / 100).toFixed(2);

   return newval.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",");
}


-3

これは私が私の問題を解決する方法です:

parseFloat(parseFloat(floatString).toFixed(2));
弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.