Question 205353 in Javascript Question posted in
A very good W3school tutorial can be found here.

Javascript – Format user input with thousands seperator

I have written a currency formatter that takes user inputs and displays it in currency format eg( user inputs 1000, it is supposed to show up as 1,000.00 This is my code below

const Currency = (props) => {
  const defaultOptions = {
    significantDigits: 2,
    thousandsSeparator: ",",
    symbol: props.symbol ? props.symbol : "NGN",
  };
  const amountValue = props.value ? props.value : 0.0;
  const formatCurrency = () => {
    let localAmount = amountValue;
    if (typeof localAmount !== "number") {
      localAmount = 0.0;
    }
    const currency = Math.floor(localAmount).toString();
    return `${defaultOptions.symbol} ${currency.replace(
      /(d)(?=(d{3})+(?!d))/g,
      `$1${defaultOptions.thousandsSeparator}`
    )}`;
  };
  return <Text {...props}>{formatCurrency()}</Text>;
};

However I want to modify it to not display the decimal part, for example when a user enters 12345678, I want to display it as 12,345,678 and not 12,345,678.00

When I try to modify it, the thousand separator no longer works as it should

Tags:

3

Answers


  1. 0

    You could make the browser do all the work for you with Intl.NumberFormat. This example uses the stripIfInteger option to truncate the currency if the minor unit is all zeros.

    "stripIfInteger": remove the fraction digits if they are all zero. This is the same as auto if any of the fraction digits is non-zero.

    const number = 12345678;
const locale = 'en-NG';

const options = {
  style: "currency",
  currency: 'NGN',
  trailingZeroDisplay: 'stripIfInteger'
};

const formatter = new Intl.NumberFormat(locale, options);
console.log(formatter.format(number));
    Login or Signup to reply.
  2. 0

    What you did works as expected sample

    import { Text, View, StyleSheet } from 'react-native';
import Constants from 'expo-constants';

const getCurrency = (props) => {
  const defaultOptions = {
    significantDigits: 2,
    thousandsSeparator: ",",
    symbol: props.symbol ? props.symbol : "NGN",
  };
  const amountValue = props.value ? props.value : 0.0;
  const formatCurrency = () => {
    let localAmount = amountValue;
    if (typeof localAmount !== "number") {
      localAmount = 0.0;
    }
    const currency = Math.floor(localAmount).toString();
    return `${defaultOptions.symbol} ${currency.replace(
      /(d)(?=(d{3})+(?!d))/g,
      `$1${defaultOptions.thousandsSeparator}`
    )}`;
  };
  return <Text {...props}>{formatCurrency()}</Text>;
};

export default function App() {
  return (
    <View style={styles.container}>
    {getCurrency({value: 12345678})}
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    paddingTop: Constants.statusBarHeight,
    backgroundColor: '#ecf0f1',
    padding: 8,
  },
});
    Login or Signup to reply.
  3. 0

    You can try it

    new Intl.NumberFormat('en-US', {        
    minimumIntegerDigits: 3,
    minimumFractionDigits: 0,
}).format(123456789)

    https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/NumberFormat/NumberFormat

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search