JSFiddle - React, Tailwind, and code Playground

by ken3desu

HTML

<div class="result">
  
</div>

CSS

.result{
  display: flex;
  flex-direction: column;
  white-space: pre;
}

JavaScript

/**
 * PHP の number_format を JavaScript で実装
 * @see ドキュメント https://www.php.net/manual/ja/function.number-format.php
 * @see 本家 https://github.com/php/php-src/blob/07fa13088e1349f4b5a044faeee57f2b34f6b6e4/ext/standard/math.c#L1011
 * @param {Number|String} num 数値を表現する文字列でもOK
 * @param {Number|String} decimals 数値を表現する文字列でもOK
 * @param {String} decimal_separator
 * @param {String} thousands_separator
 */
function number_format(num, decimals = 0, decimal_separator = '.', thousands_separator = ',') {
  let i;
  num = +num;
  decimals = +decimals < 0 ? 0 : decimals;
  // 少数
  // 文字列で数値を構築（誤差対策も兼ねます）
  let strnum = round(num, decimals);
  let addZero = "";
  if (!strnum.toString().includes('.')) {
    if (decimals > 0) {
      addZero += ".";
    }
    for (i = 0; i < decimals; i++) {
      addZero += "0";
    }
  } else {
    let decimal = strnum.toString().split('.')[1];
    for (i = 0; i < decimals - decimal.length; i++) {
      addZero += "0";
    }
  }
  strnum = `${strnum}${addZero}`.replace('.', decimal_separator);// 小数点を置き換え

  // 千の位区切り
  let sign = '';// 後の文字列操作で符号が邪魔なので避難
  if(num < 0) {
    strnum = strnum.slice(1);
    sign = '-';
  }
  let integerSide = strnum.split(decimal_separator)[0].split('');// 整数部を配列形式で抜き出し
  integerSide = splitArrayByEqualSize(integerSide.reverse(), 3)// 1の位から数えるためにchar[]を反転
    .map(t => t.join(''))// 3桁ずつまとめる
    .join(thousands_separator)
    .split('')
    .reverse()// 文字列に復元
    .join('')

  return [sign, integerSide, decimals === 0 ? '' : decimal_separator, strnum.split(decimal_separator)[1]].join('');
}

/**
 * 配列を要素 n 個の複数の小さい配列に分割。余りは最後の配列に入れる（最後の配列だけ n より小さいことがある）。
 * @param {any[]} arr
 * @param {Number} n
 * @return {any[][]}
 */
function splitArrayByEqualSize(arr, n){
   return arr.reduce( (pre, c, i) => i % n ? pre : [...pre, arr.slice(i, i + n ) ], []);
}

/**
 * 任意桁数での四捨五入
 * @param {Number} numberArg
 * @param {Number} precisionArg
 * @return {Number}
 */
function round(numberArg, precisionArg) {
  const shift =...