JavaScript 将小数转换为整数

Question

我有一个 php 变量..
<?=number_format($total_commission,2)?> 这有价值 £3,400.00

然后我有一个 JavaScript 脚本，它可以计算前端的值

// Count Up
function animateValue(id, start, end, duration) {
  var obj = document.getElementById(id);
  var range = end - start;
  var minTimer = 50;
  var stepTime = Math.abs(Math.floor(duration / range));
  // never go below minTimer
  stepTime = Math.max(stepTime, minTimer);
  // get current time and calculate desired end time
  var startTime = new Date().getTime();
  var endTime = startTime + duration;
  var timer;

  function run() {
    var now = new Date().getTime();
    var remaining = Math.max((endTime - now) / duration, 0);
    var value = Math.round(end - (remaining * range));
    obj.innerHTML = value;
    if (value == end) {
        clearInterval(timer);
    }
  }

  timer = setInterval(run, stepTime);
  run();

}

var value1 = <?=$total_count?>;
var value2 = <?=$total_commission?>;
var value3 = <?=$active_refs?>;

animateValue("value1", 0, value1, 1750);
animateValue("value2", 0, value2, 1750);
animateValue("value3", 0, value3, 1750);

我遇到的问题是当 php 变量在 javascript 中使用时，它会将数字转换为整数并丢失十进制值。从 PHP 到 JavaScript 时如何保持数字为小数？

我尝试在 end 变量上使用 toFixed(2) 但没有运气..

Answer 1

在 JavaScript 中，您不能在点后定义带有零的变量 1.00 Javascript引擎清除点后数字末尾的所有零。

例子：

let oneZero = 1.0;
console.log('oneZero:',oneZero);
let twoZeros = 1.00;
console.log('twoZeros:',twoZeros);
let oneAndTen = 1.10;
console.log('1.10:',oneAndTen);
let threeZeros = 1.000;
console.log('threeZeros:',threeZeros)

要解决您的问题，您只需像字符串一样格式化您的号码。

let formatedString = 1+".00";

但这不是最佳解决方案。你需要使用一些像numeraljs 库

Answer 2

在 javascript 中，如果需要，您可以尝试使用 Number() 函数将字符串转换为数字（整数或十进制），并且您可以使用 parseFloat(number) 方法。

使用 Number() 的示例：

// Convert strings
Number('123'); // returns 123
Number('12.3'); // returns 12.3
Number('3.14someRandomStuff'); // returns NaN
Number('42px'); // returns NaN

使用 parseFloat() 的示例：

var text = '3.14someRandomStuff';
var pointNum = parseFloat(text);
// returns 3.14

但是，在您的特定情况下，这就是它可以作为示例的工作方式： （编辑、更新代码，使用 OP 的代码，因为我现在有更多时间来清除它以供以后参考）

<?php
$total_count = (string) "£3,400.00";
$total_commission = (string) "£3,500.25";
$active_refs = (string) "£4,400.87";
?>

<div class="container2">
  <div id="value1"></div>
  <div id="value2"></div>
  <div id="value3"></div>
</div>

<script>  

// getting a float number from a formatted PHP string
var getNum = function (str) {
    var num = str.replace(/[\£\,]/mg, '');
    var num2 = parseFloat(num);
    return num2;
}

// converting the counter value back to a currency format
var convertNum = function(number){
    let numb = number;
    return numb.toLocaleString('en-GB', {style : 'currency', currency : 'GBP', minimumFractionDigits : '2', currencyDisplay : 'symbol'});
}

var value1 = getNum("<?php echo (string) $total_count ?>");
var value2 = getNum("<?php echo (string) $total_commission ?>");
var value3 = getNum("<?php echo (string) $active_refs ?>");

// Count Up
function animateValue(id, start, end, duration) {
    var obj = document.getElementById(id);
    var range = end - start;
    var minTimer = 50;
    var stepTime = Math.abs(Math.floor(duration / range));
    // never go below minTimer
    stepTime = Math.max(stepTime, minTimer);
    // get current time and calculate desired end time
    var startTime = new Date().getTime();
    var endTime = startTime + duration;
    var timer;

  function run() {
      var now = new Date().getTime();
      var remaining = Math.max((endTime - now) / duration, 0);
      var value = parseFloat(end - (remaining * range));
      obj.innerHTML = convertNum(value);
      if (value == end) {
          clearInterval(timer);
      }
  }

  timer = setInterval(run, stepTime);
  run();

}

animateValue("value1", 1, value1, 1750);
animateValue("value2", 1, value2, 1750);
animateValue("value3", 1, value3, 1750);

</script>

您还可以检查上述代码版本here的结果/输出： 或者如果它已经被删除，那么here

也许不太重要我想指出，在您的代码中，以下行将小数转换为整数，也必须对其进行编辑：

var value = Math.round(end - (remaining * range));

这一行将返回一个整数。