it-roy-ru.com

Формат номера, чтобы всегда показывать 2 десятичных знака

Я хотел бы отформатировать мои числа, чтобы всегда отображать 2 десятичных знака, округляя, где это применимо.

Примеры:

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

Я использовал это: 

parseFloat(num).toFixed(2);

Но он отображает 1 как 1, а не 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>

Обратите внимание, что он будет округлять до 2 десятичных знаков, поэтому вход 1.346 вернет 1.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

Этот ответ потерпит неудачу, если value = 1.005.

В качестве лучшего решения можно избежать проблемы округления, используя числа, представленные в экспоненциальной записи:

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

Кредит: округление десятичных дробей в JavaScript

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

Благодаря Разу , это статья, и ссылка на Math.round MDN .

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'

Вы также можете получить jQuery Числовой формат из GitHub .

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

Преобразуйте число в строку, сохранив только два десятичных знака:

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

Результат n будет:

5.57
4
Behnam Mohammadi

Там, где требуется конкретное форматирование, вы должны написать собственную процедуру или использовать библиотечную функцию, которая делает то, что вам нужно. Основной функциональности 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

Мне пришлось выбирать между преобразованиями parseFloat () и Number (), прежде чем я смог сделать вызов toFixed (). Вот пример форматирования чисел после захвата пользовательского ввода.

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 () автоматически обработает пустую строку и преобразует ее в ноль.

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

Округлите число с двумя десятичными точками, , Затем убедитесь, что оно проанализировано с parseFloat() , Чтобы вернуть Number, а не String, если вам все равно, является ли это String или Number.

0
Yuichi

Расширить Математика Объект с Точность Метод

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

function 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