用户输入的简写形式呈现的字节数（例如“ kB”，“ MB”，“ GB”等）

debugcn 发表于 Dev

托娃

我正在尝试构建从用户输入读取字节数并将其转换为带有后缀'kB'，'MB'，'GB'等的简写形式的组件。

因此，如果用户输入3456，则将其转换为3kB，将32456128转换为32MB，依此类推。

我的第一个尝试是使用以下形式的RegExp：

e.target.value.replace(/^(\d+)(\d{3})$/, (m,g0,g1) => g1 ? g0+'k' : m)

这种方法行之有效，但我立即面临几个问题：*难以扩展*难以舍入到最接近的整数（3586应该变成'4k'，而不是'3k'）

我的组件简化了：

import { useState } from 'react'
import { render } from 'react-dom'

const App = () => {
  const [num, setNum] = useState(''),
        onNumInput = e => { 
          const shortNum = e.target.value.replace(/^(\d+)(\d{3})$/, (m,g0,g1) => g1 ? g0+'k' : m)
          setNum(shortNum)
        }
  return (
    <div>
      <input type="number" onChange={onNumInput} />
      <div>{num}</div>
    </div>
  )
}

render (<App />, document.getElementById('root'))

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>

如何解决上述问题以获得所需的功能？

叶夫根·戈本科夫（Yevgen Gorbunkov）

我建议采用Math方法来实现您的目标：

const { useState } = React,
      { render } = ReactDOM,
      rootNode = document.getElementById('root')

const App = () => {
  const [num, setNum] = useState(''),
        onNumInput = ({target:{value}}) => { 
          if(!value.length) setNum('')
          else {
            const suffixes = ['', 'kB', 'MB', 'GB', 'TB', 'PB'],
                  {min, log, round, pow} = Math,
                  power = min(0|log(value)/log(1024), suffixes.length-1),
                  base = round(value/pow(1024,power)),
                  suffix = suffixes[power]          
            setNum(`${base}${suffix}`)
          }
        }
  return (
    <div>
      <input type="number" onChange={onNumInput} />
      {!!num.length && <div>{num}</div>}
    </div>
  )
}

render (
  <App />,
  rootNode
)

<script crossorigin src="https://unpkg.com/react@16/umd/react.production.min.js"></script><script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.production.min.js"></script><div id="root"></div>

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。