使用React native EXPO时如何将数字格式化为货币?

时间:2019-04-07 06:24:38

标签: react-native expo

如何获取一个像chromiumLauncher.js这样的数字并将其输出为10000

我什至遇到$10,000.00的问题,并出现了String.format(...)错误。

我关注了无数文章,所有文章都不完整,没有任何内容。

我不需要完全的国际化,只需要格式化数字的能力

7 个答案:

答案 0 :(得分:3)

为了避免使用库,可以使用以下代码

const defaultOptions = {
  significantDigits: 2,
  thousandsSeparator: ',',
  decimalSeparator: '.',
  symbol: '$'
}

const currencyFormatter = (value, options) => {
  if (typeof value !== 'number') value = 0.0
  options = { ...defaultOptions, ...options }
  value = value.toFixed(options.significantDigits)

  const [currency, decimal] = value.split('.')
  return `${options.symbol} ${currency.replace(
    /\B(?=(\d{3})+(?!\d))/g,
    options.thousandsSeparator
  )}${options.decimalSeparator}${decimal}`
}

答案 1 :(得分:2)

您可以使用此库react-number-format。具有这些功能

  1. 前缀,后缀和千位分隔符。
  2. 自定义格式模式。
  3. 掩盖。
  4. 自定义格式处理程序。
  5. 在输入中格式化数字或     格式为简单文本

样品用量

<NumberFormat value={2456981} displayType={'text'} thousandSeparator={true} prefix={'$'} />

输出:$ 2,456,981

答案 2 :(得分:1)

您可以使用toFixed方法显示2个小数点。

let num = 1000; 
console.log(num.toFixed(2)); // 1000.00

您可以像这样使用正则表达式

function currencyFormat(num) {
  return '$' + num.toFixed(2).replace(/(\d)(?=(\d{3})+(?!\d))/g, '$1,')
}
console.log(currencyFormat(2665)); // $2,665.00

答案 3 :(得分:1)

以上都不适合我...但是这个小伙子有正确的想法/解决方法https://medium.com/@nidhinkumar/react-js-number-format-and-styling-a1a6e211e629

const numberFormat = (value) =>
  new Intl.NumberFormat('en-IN', {
    style: 'currency',
    currency: 'INR'
  }).format(value);

numberFormat(50000); //output as ₹ 50,000.00
numberFormat(10000); //output as ₹ 10,000.00

答案 4 :(得分:1)

最快的方法是使用如上所述的react-number-format,但不要忘记renderText道具,这样React Native不会抛出渲染错误。

执行以下步骤:

  1. 安装。使用以下命令:
npm i react-number-format
  1. 像这样在您的React Native应用中使用它:
import NumberFormat from 'react-number-format';

export function ReactNativeNumberFormat({ value }) {
  return (
    <NumberFormat
      value={value}
      displayType={'text'}
      thousandSeparator={true}
      prefix={'$'}
      renderText={formattedValue => <Text>{formattedValue}</Text>} // <--- Don't forget this!
    />
  );
}

效果很好。如您所见,我最终创建了接受value作为prop的自定义组件,以便可以在需要它的任何地方使用它。就是这样:

  <View>
    <ReactNativeNumberFormat value={530000} />
  </View>

希望是有用的。

PS:这是我的参考信息=> https://github.com/s-yadav/react-number-format/issues/17#issuecomment-395187806

答案 5 :(得分:0)

我在用于Android的Java中使用它

String.format("%s%,d", "$", 10000)

具有这样的输出:

$10,000

答案 6 :(得分:0)

可以如下所示实现,如果没有小数,也可以在结尾处删除结尾的00。

      costing= () => {
        const cost= 1478.90 + 940;
        return parseFloat(cost).toFixed(2).replace(/(\d)(?=(\d{3})+(?!\d))/g, '$1,');
      }