Блог

Как мне взять число, подобное 10000 , и вывести его как $10,000.00 ? У меня даже была проблема с String.format(...) с Not a function ошибкой.

Я следил за многочисленными статьями, все неполные и ни одна не работает. Мне не нужна полная интернационализация, просто возможность форматировать число

Вы можете использовать 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  

Вы можете использовать эту библиотеку react-number-format. Он обладает следующими функциями

1. Префикс, суффикс и разделитель тысяч.
2. Шаблон пользовательского формата.
3. Маскировка.
4. Пользовательский обработчик форматирования.
5. Форматируйте число во входных данных или форматируйте как простой текст

Пример использования

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

Результат: $ 2,456,981

Редактировать: Извините, это React.js решение — не React Native. У меня ничего из вышеперечисленного не сработало… но у этого парня была правильная идея / решение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
  

Чтобы избежать использования библиотек, вы можете использовать следующий код

 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}`
}
  

Самый быстрый способ — использовать react-number-format, как указано выше, но не забывайте renderText prop, чтобы React Native не выдавал ошибку рендеринга.

Выполните этот шаг:

1. Установите. Используйте эту команду:

 npm i react-number-format
  

2. Используйте его в своем приложении React Native следующим образом:

 import React from 'react';
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 в качестве реквизита, чтобы я мог использовать его везде, где мне это нужно. Вот так:

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

Надеюсь, это может быть полезно.

PS: Это моя ссылка =>https://github.com/s-yadav/react-number-format/issues/17#issuecomment-395187806.

Используйте встроенную функцию React toLocaleString:

   const formatNumber = (q) => {
    return q.toLocaleString('en-US', {
        style: 'currency',
        currency: 'USD'
    })
   } 
  

Недавно я написал следующую утилиту форматирования чисел, которую можно использовать в случае OP, а также в других. Надеюсь, будет довольно просто изменить его, чтобы охватить другие случаи (я ожидаю, что большинство хотели бы изменить мои значения по умолчанию, например).

 type NumberFormatProps = {
  value: number;
  thousandSeparator?: string;
  decimalSeparator?: string;
  significantDigits?: number;
  showTrailingZeros?: boolean;
  symbol?: '$' | 'kr.' | '%'; // Add other symbols as needed
  showSymbol?: boolean;
  symbolPosition?: 'before' | 'after';
  showSymbolSpace?: boolean;
};


/**
 * Formats a number. Supports changing symbol, thousand and decimal separators and more (see props).
 * @param value The value to format
 * @param thousandSeparator The separator to use between thousands
 * @param decimalSeparator The separator to use before decimals
 * @param significantDigits The number of significant digits to show
 * @param showTrailingZeros Whether to show trailing zeros for significant digits (i.e. 1,00 if significant digits is 2)
 * @param symbol The  symbol to use
 * @param showSymbol Whether to show the symbol
 * @param symbolPosition Whether to show the symbol before or after the value
 * @param showSymbolSpace Whether to show a space between the  symbol and the value
 * @returns
 */
export const getFormattedNumber = ({
  value,
  thousandSeparator = '.',
  decimalSeparator = ',',
  significantDigits = 0,
  showTrailingZeros = false,
  symbol = 'kr.',
  showSymbol = true,
  symbolPosition = 'after',
  showSymbolSpace = true,
}: NumberFormatProps) => {
  const significantDigitsExponent = 10 ** significantDigits;
  const valueWithSignificantDigits = showTrailingZeros
    ? // If significant digits is 2 then this is e.g. 1.00, 1.10, 1.11
      value.toFixed(significantDigits)
    : // If significant digits is 2 then this is e.g. 1, 1.1, 1.11
      `${Math.round((value   Number.EPSILON) * significantDigitsExponent) / significantDigitsExponent}`;

  // Split the value into the parts before and after the decimal point
  const [integerPart, fractionalPart] = valueWithSignificantDigits.toString().split('.');
  // Replace thousand separator in integer part
  const formattedIntegerPart = `${integerPart.replace(/B(?=(d{3}) (?!d))/g, thousandSeparator)}`;
  // Add decimal separator and fractional part if needed
  const formattedValue = fractionalPart
    ? `${formattedIntegerPart}${decimalSeparator}${fractionalPart}`
    : formattedIntegerPart;

  // Add symbol
  if (showSymbol amp;amp; Boolean(symbol)) {
    const formattedValueWithSymbol =
      symbolPosition === 'after' ? `${formattedValue} ${symbol}` : `${symbol} ${formattedValue}`;
    return showSymbolSpace ? formattedValueWithSymbol : formattedValueWithSymbol.replace(' ', '');
  }

  return formattedValue;
};

  

В случае OP это будет называться так:

 getFormattedNumber({
  value: 10000,
  thousandSeparator: ',',
  decimalSeparator: '.',
  symbol: "$",
  showSymbolSpace: false,
  symbolPosition: 'before',
  significantDigits: 2,
  showTrailingZeros: true
})
  

 export const CurrencyFormatter = (number, options) => {
  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);

    let valueFormatted;

    if (options.significantDigits == 0) {
      const [currency] = value.split(".");
      valueFormatted = `${options.symbol}${currency.replace(
        /B(?=(d{3}) (?!d))/g,
        newOptions.thousandsSeparator
      )}`;
    } else {
      const [currency, decimal] = value.split(".");
      valueFormatted = `${options.symbol}${currency.replace(
        /B(?=(d{3}) (?!d))/g,
        options.thousandsSeparator
      )}${options.decimalSeparator}${decimal}`;
    }

    return valueFormatted;
  };

  return currencyFormatter(number, options);
};
  

может быть достигнуто, как показано ниже, и вы также можете удалить конечное значение 00 в конце, если нет десятичных знаков

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