[再構築]price入力値format機能

1.1000単位カンマ

SeriesFormの価格入力値を1000単位にフォーマットする機能を実現
1000単位で、後ろから3つの数字を数えて、撮ります
onChangeのたびにinput値が取得され、条件に従って操作され、戻ります.

入力値の受信とフォーマットを実現する関数

アレイ

に変換

反転

各

要素に3倍のインデックスがある場合は、","を追加します.そうでない場合は、新しい配列を作成します(4倍の2番目の要素に追加する必要がありますが、インデックスは0で始まる)

.

を元に戻すと

文字列

に変換

// SeriesForm.jsx

export const formatPrice = input => {
  const formatedValue = input
    .split('')
    .reverse()
    .map((str, index) => (index > 0 && index % 3 === 0 ? `${str},` : str))
    .reverse()
    .join('');
  return formatedValue;
};

input値に関数を適用し、

に配置します.

// SeriesForm.jsx

  <PayInput
    width="50%"
    type="text"
    value={formatPrice(values.price)}
    name="price"
    onChange={handleChange}
    min={0}
    disabled={edit}
  />

の入力値を取得して状態にする場合は、文字列と先頭の0を削除してスケール(値を入れるときにフォーマット)

を行う.

  const handleChange = e => {
    const { name, value } = e.target;

    if (name === 'price') {
      const filteredValue = value.replace(/[^0-9]/g, '').replace(/(^0+)/g, '');
      setValues({ ...values, [name]: filteredValue });
      return;
    }

    setValues({ ...values, [name]: value });
  };

2.ハングル形式で書式設定

実装試行1

const changeNumberToText = value => {
  switch (value) {
    case '1':
      return '일';
    case '2':
      return '이';
    case '3':
      return '삼';
    case '4':
      return '사';
    case '5':
      return '오';
    case '6':
      return '육';
    case '7':
      return '칠';
    case '8':
      return '팔';
    case '9':
      return '구';
    default:
      return '';
  }
};

export const formatPriceToText = input => {
  const formatedValue = input
    .split('')
    .reverse()
    .map((str, index) => {
      const formattedValue = changeNumberToText(str);

      if (str === '0') {
        return '';
      }

      switch (index % 4) {
        case 1:
          return `${formattedValue}십`;
        case 2:
          return `${formattedValue}백`;
        case 3:
          return `${formattedValue}천`;
        case 0:
          return index === 0 ? formattedValue : `${formattedValue}만`;
        default:
          return formattedValue;
      }
    })
    .reverse()
    .join('');

  return formatedValue;
};

に質問

何千何万

解決策

千単位を超え、「万」は

を加えなければならない.

数字の後ろから4個から千単位以下の値を割り込み、5番目から最後の数字まで万単位以上の値を割り込み、それぞれ単位(数字ごとに10、100、千の単位を加算)

を適用する.

単位は適用する万単位以上と千単位以下の値を加算し、万単位以上の値を加算する前に「万」を加算し、

.

const addNumberUnit = (str, index) => {
  const formattedValue = changeNumberToText(str);
  if (str === '0') {
    return '';
  }
  switch (index % 4) {
    case 1:
      return `${formattedValue}십`;
    case 2:
      return `${formattedValue}백`;
    case 3:
      return `${formattedValue}천`;
    default:
      return formattedValue;
  }
};

export const formatPriceToText = value => {
  const reversedValueArr = value.split('').reverse();

  const thousandUnitValue = reversedValueArr
    .slice(0, 4)
    .map((str, index) => addNumberUnit(str, index))
    .reverse()
    .join('');

  const tenThousandUnitValue =
    value.length <= 4
      ? ''
      : reversedValueArr
          .slice(4)
          .map((str, index) => addNumberUnit(str, index))
          .reverse()
          .join('')
          .concat('만');

  return tenThousandUnitValue + thousandUnitValue;
};