vue.js - Display a number with two decimals to the user without changing the original precise value [javascript] - Stack Overflo

admin管理员组

文章数量:1389772

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.

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.

• javascript
• vue.js
• decimal
• rounding

Share Improve this question Follow asked Nov 2, 2021 at 19:36 user3670188user3670188 5522 silver badges88 bronze badges

Add a ment  | 

6 Answers 6

Sorted by: Reset to default 6

Of course, you can use method toFixed().

For example:

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

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

mydecimal.tofixed(2)

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>

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 );

The ending -0 converts back to a number

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)

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.

本文标签：