Как округлить и отформатировать число до JavaScript без нулей в конце? - PullRequest
Новая
       147

Как округлить и отформатировать число до JavaScript без нулей в конце?

0 голосов
/ 05 мая 2020

У меня есть два входа, которые умножаются, и мне нужно, чтобы результат был округлен в меньшую сторону без конечных нулей. Я пробовал несколько различных встроенных методов, например number.toFixed(2), но они не дали желаемого результата.

Эту проблему можно воспроизвести, введя числа 20 и 6 в первый и второй входы. здесь: 

$(document).on("change", ".p-cell, .s-cell", () => {
    var val1 = $(".p-cell").val();
    var val2 = $(".s-cell").val();    
    var total = val1 / 100 * val2;
    
    $(".w-cell").val(total).trigger("input");
});
<input class="p-cell" type="text" value="0" />
<input class="s-cell" type="text" value="0" />
<input class="w-cell" type="text" value="0" />

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

Ответы [ 3 ]

2 голосов
/ 05 мая 2020

Вы можете использовать Number.prototype.toFixed(), .toFixed(2), если хотите показать два десятичных знака: 

const $pCell = $(".p-cell");
const $sCell = $(".s-cell");
const $wCell = $(".w-cell");

$(document).on('input', '.p-cel, .s-cell', () => {
  const val1 = $pCell.val() || 0;
  const val2 = $sCell.val() || 0;
  const total = (val1 / 100 * val2).toFixed(2);
    
  $wCell.val(total);
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<input class="p-cell" type="text" value="0" />
<input class="s-cell" type="text" value="0" />
<input class="w-cell" type="text" value="0" readonly />

Кроме того, если вы хотите удалить любое количество конечных нулей, поэтому 1.20 становится 1.2, а 2.00 становится 2, вы можете используйте String.prototype.replace() с RegExp : total.replace(/\.?0+$/, ''): 

const $pCell = $(".p-cell");
const $sCell = $(".s-cell");
const $wCell = $(".w-cell");

$(document).on('input', '.p-cel, .s-cell', () => {
  const val1 = $pCell.val() || 0;
  const val2 = $sCell.val() || 0;
  const total = (val1 / 100 * val2).toFixed(2);
    
  $wCell.val(total.replace(/\.?0+$/, ''));
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<input class="p-cell" type="text" value="0" />
<input class="s-cell" type="text" value="0" />
<input class="w-cell" type="text" value="0" readonly />
0 голосов
/ 05 мая 2020

Существует несколько распространенных способов округления до фиксированного числа десятичных знаков в JavaScript. У каждого из них есть определенные проблемы.

Number.protototype.toFixed метод 

Number(x).toFixed(digits)

Этот метод создает строку с запрошенным количеством цифр. Однако он округляет числа, оканчивающиеся на 5, неправильно примерно в 9% случаев. 1015 *, но округляется неправильно примерно в 0,7% случаев.

метод сложения и вычитания экспоненты 

Math.round( x + 'e' + digits ) + 'e-' + digits;

Это дает число, округленное до digits, и округляется правильно. Но у него есть фатальный недостаток - для входных значений меньше 1e-6 он возвращает NaN.

Я написал функцию, которая использует метод сложения и вычитания экспоненты, но позволяет избежать фатальной ошибка для малых входных значений. Доступно на github . 

/**
 * round number `x` to `digits` number of digits after decimal point
 */
function roundToFixed (val, digits = 0) {
  if (typeof val === 'number' && typeof digits === 'number'
    && Number.isInteger(digits) &&
    (digits === 0 || Math.sign(digits) === 1)) {
    const valF = numToFloat(val);
    const valFNew = numToFloat(
      Math.round(+(valF.mant + 'e' + (valF.exp + digits)))
    );
    return +(valFNew.mant + 'e' + (valFNew.exp - digits));
  }
  return NaN;
}

/**
 * convert number to Float object
 */
function numToFloat (val) {
  const [mant, exp] = Number(val)
    .toExponential()
    .split('e')
    .map(str => +str);
  return {
    mant,
    exp
  };
}
0 голосов
/ 05 мая 2020

Вы можете округлить без завершающего нуля с помощью Math.round. Я покажу вам трюк. 

        $(document).on("change", ".p-cell, .s-cell", function () {
    var val1 = $(".p-cell").val();
    var val2 = $(".s-cell").val();
    var total = Math.round((val1/100 * val2)*100)/100;
    $(".w-cell").val(total).trigger("input");
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input class="p-cell" type="text" value="0" />
    <input class="s-cell" type="text" value="0" />
    <input class="w-cell" type="text" value="0" />
...