Say for example I the following decimal value:

let myDecimal = 117.049701384;

I want to show the user 117.05 but without changing the original precise value above.

Basically what I want is to mimic Excel behaviour with decimals, where it displays a number with two decimals but holds all the decimals for math operations.

The reason I want to do this is because I want to keep the UI clean of huge decimals numbers, but also keeping the math operations that I have to perform as precise as possible. I guess I can duplicate variables but that sounds cumbersome and tedious.

Is that posible in Javascript?

I am using Javascript and VueJS 2.x in this App.

Thanks in advance.

CodePudding user response：

Of course, you can use method toFixed().

For example:

let myDecimal = 117.049701384;
console.log(myDecimal.toFixed(2)); // 117.05

<iframe name="sif1" sandbox="allow-forms allow-modals allow-scripts" frameborder="0"></iframe>

CodePudding user response：

use this where you return the mydecimal value back for the ui

mydecimal.tofixed(2)

CodePudding user response：

Something like this?

document.querySelectorAll("span[data-value]")
  .forEach(span => span.textContent = ( span.dataset.value).toFixed(2)); // or the VUE equivalent

<span data-value="117.049701384"></span><br/>
<span data-value="217.01384"></span>

<iframe name="sif2" sandbox="allow-forms allow-modals allow-scripts" frameborder="0"></iframe>

CodePudding user response：

If you want truncation with rounding then toFixed is the function
If you do not want rounding then you can always use regEx

let newVarT = (117.049701384).toFixed(2)-0
let newVarR = (117.049701384 "").match(/([\d] \.[\d]{0,2})/)[1]-0
console.log( "toFixed", newVarT, "RegEx", newVarR );

<iframe name="sif3" sandbox="allow-forms allow-modals allow-scripts" frameborder="0"></iframe>

The ending -0 converts back to a number

CodePudding user response：

If by design your variable should contain value that must not be changed in runtime, do not declare it with let, but use const instead. This will save you some time in future. Then just convert/format your constant as you wish while displaying it to user.

// Your value
const myDecimal = 117.049701384

// Show rounded result to user
console.log(Math.round(myDecimal * 100) / 100);

// Your constant still constant, obviously
console.log(myDecimal)

<iframe name="sif4" sandbox="allow-forms allow-modals allow-scripts" frameborder="0"></iframe>

CodePudding user response：

You can use computed property or filter:

new Vue({
  el: '#demo',
  data() {
    return {
      myDecimal: 117.049701384
    }
  },
  computed: {
    decimalRounded() {
      return this.myDecimal.toFixed(2)
    }
  },
  filters: {
    decimalFiltered: function (value) {
      if (!value) return ''
      return value.toFixed(2)
    }
  }
})

Vue.config.productionTip = false
Vue.config.devtools = false

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="demo">
  <p>{{ myDecimal }}</p>
  <p>with computed: {{ decimalRounded }}</p>
  <p>with filter: {{ myDecimal | decimalFiltered }}</p>
</div>

<iframe name="sif5" sandbox="allow-forms allow-modals allow-scripts" frameborder="0"></iframe>

CodePudding user response：

At the end I used toFixed(2)-0 to display it directly to the user. This way it doesn't change the original value and I can still use it for the rest of the application math operations as precise as posible.