How to check for certain decimal DIGIT AMOUNT (i.e., 0.02 has 2 decimal digits, 0.464 has 3, etc.) in JavaScript

Question

I've been trying to round my digits to the nearest thousandth in JavaScript for a calculator, and it has, but it still displays the decimal points which have 0 as their value in the end, but I want to limit it down to the nearest number with a value. (I want it to limit down like such: 100.000 -> 100, 948.500 -> 948.5, etc.) Is there any way to limit the extra place holders being displayed instead of displaying the 0's?

function getInputValue() {
  // Selecting the input element and get its value 
  var y2 = document.getElementById("input1").value;
  var y1 = document.getElementById("input2").value;
  var x2 = document.getElementById("input3").value;
  var x1 = document.getElementById("input4").value;

  let total = (y2 - y1) / (x2 - x1);

  total = total.toFixed(4);
};

I have already tried to use other rounding methods, but they didn't round as expected.

So why are you using toFixed() if you do not want the trailing zeros? — epascarello, Nov 01 '22 at 13:28

Mr. Polywhirl · Accepted Answer · 2022-11-01T13:15:38.513

You have a few problems that you can break down:

How to format a number with/without fractional precision
How to calculate the slope from two points
How to obtain input values

Work each problem out one-by-one.

Figure out a way to determine if a number is a natural (whole) number or a real (fractional) number. Also, create a function that can calculate a slope given two points without formatting. It should just be responsible for calculating a numerical result.

Update: You can trim-off the training zero fractional digits with the following regular expression:

/(?<=\.\d*)0*$/

const
  inputX1 = document.querySelector('#x1'),
  inputY1 = document.querySelector('#y1'),
  inputX2 = document.querySelector('#x2'),
  inputY2 = document.querySelector('#y2');

// Credit: https://stackoverflow.com/a/73124787/1762224
const formatNumber = (n, precision = 4) =>
  !Number.isInteger(n) && Number.isFinite(n) ?
    n.toFixed(4, precision).replace(/(?<=\.\d*)0*$/, '') :
    n;

console.log(formatNumber(100));     // 100
console.log(formatNumber(948.500)); // 948.5
console.log(formatNumber(948.0));   // 948
console.log(formatNumber(0.25));    // 0.25
console.log(formatNumber(0.0));     // 0

const slope = (x1, y1, x2, y2) => (y2 - y1) / (x2 - x1);

const calculate = () => {
  console.log(formatNumber(slope(
    inputX1.valueAsNumber,
    inputY1.valueAsNumber,
    inputX2.valueAsNumber,
    inputY2.valueAsNumber
  )));
};


calculate(); // 15.6154

.as-console-wrapper { max-height: 5rem !important; }
html, body { width: 100%; height: 100%; }
body { display: flex; flex-direction: column; align-items: center; justify-content: flex-start; gap: 0.5rem; }
body > div { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0.25rem 0.5rem; }
label > span { font-weight: bold; }
label > input { width: 8ch; }

<div>
  <label>
    <span>x1</span>
    <input id="x1" type="number" value="-50" step="0.1" />
  </label>
  <label>
    <span>y1</span>
    <input id="y1" type="number" value="-2000" step="0.1" />
  </label>
  <label>
    <span>x2</span>
    <input id="x2" type="number" value="80" step="0.1" />
  </label>
  <label>
    <span>y1</span>
    <input id="y2" type="number" value="30" step="0.1" />
  </label>
</div>
<button type="button" onClick="calculate()">Recalculate</button>

It almost works, but I don't need the extra 0's. For an example, no place holding digits like the extra 0's in 0.500, and I need it to be 0.5 if it meets the conditions. I need to limit it down if it has extra decimal zeros as I asked in the beginning. I really appreciate your help though, and it somewhat worked! — My Info, Oct 31 '22 at 19:02
For an example, type 7 7 for the first row, then 9 8 for the second row. You will notice you get 0.500 instead of it limiting down to 0.5. — My Info, Oct 31 '22 at 19:04
If you can help me with this I will gladly check off your answer! Thanks! — My Info, Oct 31 '22 at 19:04
Thanks, but it still only applies it to certain digits. Numbers like 0.25 still do not limit down, but instead represent as 0.2500 on the output. Is there more code I should add for the trim logic? — My Info, Oct 31 '22 at 20:55
@MyInfo I simplified the regular expression. I actually made it more difficult than it needed to be. Try the updated code. — Mr. Polywhirl, Oct 31 '22 at 22:08

How to check for certain decimal DIGIT AMOUNT (i.e., 0.02 has 2 decimal digits, 0.464 has 3, etc.) in JavaScript

1 Answers1