I am creating a calculator app to help with decimals and would like something to two decimal places like below:
number output
------ -------
1 1.00
1.446 1.45
1.567 1.57
I have tried using toFixed(2) but I get an error as I'm using maths and not strings.
I've also tried using toPrecision(4) but I also get an error
Any help would be really appreciated.
import React from 'react';
import {StyleSheet, Text, View, TouchableOpacity, Vibration} from 'react-native';
import {useState} from 'react';
import { Entypo } from '@expo/vector-icons';
export default function App() {
const [darkMode, setDarkMode] = useState(false);
const [currentNumber, setCurrentNumber] = useState('');
const [lastNumber, setLastNumber] = useState('');
const buttons = ['C', 'DEL', '/', 7, 8, 9, '*', 4, 5, 6, '-', 1, 2, 3, '+', 0, '.', '=']
function calculator() {
let lastArr = currentNumber[currentNumber.length-1];
if(lastArr === '/' || lastArr === '*' || lastArr === '-' || lastArr === '+' || lastArr === '.') {
setCurrentNumber(currentNumber)
return
}
else {
let result = eval(currentNumber).toString();
setCurrentNumber(result)
return
}
}
function handleInput(buttonPressed) {
if(buttonPressed === '+' || buttonPressed === '-' || buttonPressed === '*' || buttonPressed === '/') {
Vibration.vibrate(35);
setCurrentNumber(currentNumber + buttonPressed)
return
}
else if (buttonPressed === 1 || buttonPressed === 2 || buttonPressed === 3 || buttonPressed === 4 || buttonPressed === 5 ||
buttonPressed === 6 || buttonPressed === 7 || buttonPressed === 8 || buttonPressed === 9 || buttonPressed === 0 || buttonPressed === '.' ) {
Vibration.vibrate(35);
}
switch(buttonPressed) {
case 'DEL':
Vibration.vibrate(35);
setCurrentNumber(currentNumber.substring(0, (currentNumber.length - 1)))
return
case 'C':
Vibration.vibrate(35);
setLastNumber('')
setCurrentNumber('')
return
case '=':
Vibration.vibrate(35);
setLastNumber(currentNumber + '=')
calculator()
return
}
setCurrentNumber(currentNumber + buttonPressed)
}
From your question it is not clear where you want to perform the conversion. However, this should get you on the right track.
Both toFixed() and toPrecision() return a string representing a number. It's clear that you can't use the string for further calculations. In order to do so, use parseFloat() to get the floating point number from the string.
const floatingPointNumber = 1.567;
parseFloat(floatingPointNumber.toFixed(2));
parseFloat(floatingPointNumber.toPrecision(3));
Regarding toFixed() and toPrecision(), they actually perform the same operation but the first gives n decimal places while the latter gives n digits (see this question).
I understand that you are trying to round and not just clip to decimal places. You could use Math.round. While it rounds to the nearest int, you could use this trick to round decimals:
const roundToHundredths = num=>{
let roundedNum = Math.round(num*100)/100
// force 2 decimal places
return roundedNum.toFixed(2);
}
Keep in mind that the value is now a string. Use parseFloat if other calculations have to be done
try this, may be helps you;
function floatTwoDecFromString(value: string) {
let newValue = value.replace(/[^0-9.]/g, '').replace(/(\..*?)\..*/g, '$1');
newValue =
newValue.indexOf('.') !== -1
? newValue.slice(0, newValue.indexOf('.') + 3)
: newValue;
return newValue;
}