web-dev-qa-db-ja.com

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

必要に応じて四捨五入して、小数点以下2桁を常に表示するように数字をフォーマットしたい.

例:

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

私はこれを使っています: 

parseFloat(num).toFixed(2);

しかし11ではなく1.00として表示しています。

602
Varada

これはFF4ではうまくいきます:

parseFloat(Math.round(num3 * 100) / 100).toFixed(2);

ライブデモ

var num1 = "1";
document.getElementById('num1').innerHTML = parseFloat(Math.round(num1 * 100) / 100).toFixed(2);

var num2 = "1.341";
document.getElementById('num2').innerHTML = parseFloat(Math.round(num2 * 100) / 100).toFixed(2);

var num3 = "1.345";
document.getElementById('num3').innerHTML = parseFloat(Math.round(num3 * 100) / 100).toFixed(2);
span {
    border: 1px solid #000;
    margin: 5px;
    padding: 5px;
}
<span id="num1"></span>
<span id="num2"></span>
<span id="num3"></span>

round は小数点以下2桁になりますので、入力1.3461.35を返します。

873
drudge
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

document.getElementById('line1').innerHTML = Number(1).toFixed(2);
document.getElementById('line2').innerHTML = Number(1.341).toFixed(2);
document.getElementById('line3').innerHTML = Number(1.345).toFixed(2);
document.getElementById('line4').innerHTML = Number(1.3450001).toFixed(2);
<span id="line1"></span>
<br/>
<span id="line2"></span>
<br/>
<span id="line3"></span>
<br/>
<span id="line4"></span>

240
Abel ANEIROS
73
razu
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
18
Tiberiu Petcu

最も簡単な答え:

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

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

13
macio.Jun

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
11
PirateApp

最も正確な丸めのために、この関数を作成してください:

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

Razuthis article、および MDNのMath.roundリファレンス のおかげで/。

10
Nate
var number = 123456.789;


console.log(new Intl.NumberFormat('en-IN', { maximumFractionDigits: 2 }).format(number));

https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Global_Objects/NumberFormat

8
zloctb

すでにjQueryを使用している場合は、 jQuery Number Format プラグインの使用を検討してください。

プラグインは文字列としてフォーマットされた数を返すことができます、あなたは小数、および千単位の区切り文字を設定することができ、あなたは表示する小数の数を選ぶことができます。

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

あなたは GitHubからのjQuery番号フォーマット も得ることができます。

8
Sam Sehnert

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

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>

7
KooiInc

あなたは床を探していますか?

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
samwise

小数点を2つだけ残して、数値を文字列に変換します。

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

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

5.57
4

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

丸めと書式設定の詳細な説明はここにあります: http://www.merlyn.demon.co.uk/js-round.htm#RiJ

一般的な規則として、丸めと書式設定は出力前の最後のステップとしてのみ実行されるべきです。早めに行うと、予想外に大きなエラーが発生し、フォーマットが破壊される可能性があります。

3
RobG

これは、小数点以下の桁数を任意に設定できる汎用関数です。

function numberFormat(val, decimalPlaces) {

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

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
Leonardo Filipe
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
2
Ar No
var quantity = 12;

var import1 = 12.55;

var total = quantity * import1;

var answer = parseFloat(total).toFixed(2);

document.write(answer);
1
Darshak Shekhda

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入力タイプは "number"ですが、ユーザ入力は実際には "string"データタイプです。ただし、toFixed()関数はNumberであるオブジェクトに対してのみ呼び出すことができます。

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

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

Number()とparseFloat()でキャストした方がよい理由は、空の入力文字列に対してもNaN値に対しても特別な検証を実行する必要がないためです。 Number()関数は自動的に空の文字列を処理し、それをゼロに変換します。

1
vitek

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

ロケーションバーに貼り付けると、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
1
mplungjan

以下の私の解決策は以下の通りです。

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

誰もが穴を開けることができるかどうか私に知らせて

1
Sam Johnson

ほんとに好き:

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

数値を2つの小数点で丸めてから、StringまたはNumberのどちらであっても構わない限り、StringではなくNumberを返すようにparseFloat() で解析してください。

0
Yuichi

Math objectを precision methodで拡張する

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
bortunac

関数numberWithCommas(number){

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

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

}

0
Tsuna Sawada

これは、フロアのみを使用した四捨五入の別の解決策です。つまり、計算金額が元の金額よりも大きくならないようにするためです(トランザクションに必要な場合があります)。 Math.floor(num * 100)/ 100

0
Naty

最近のブラウザでは、 toLocaleString を使用してください。

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

小数点区切り文字 を制御するための最初のパラメータとしてロケールタグを指定します。ドットの場合は、たとえば英語の米国ロケールを使用します。

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

これは、

1.35

ヨーロッパのほとんどの国では小数点としてコンマが使用されているので、例えばスウェーデン/スウェーデンのロケールを使用するとします。

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

それは与えるでしょう:

1,35

0
holmis83

parseInt(number * 100) / 100;は私のために働きました。

0
Be Wake Pandey