以簡寫形式呈現用戶輸入的字節數（例如“kB”、“MB”、“GB”等）

Question

我正在嘗試構建從用戶輸入中讀取字節數並將其轉換為帶有后綴“kB”、“MB”、“GB”等的短符號的組件。

因此，如果用戶輸入 3456，它會將其轉換為 3kB，32456128 將轉換為 32MB，依此類推。

我的第一次嘗試是使用以下形式的 RegExp：

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

它有點工作，但我馬上遇到了幾個問題：*很難擴展*很難四舍五入到最近的 integer（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>

如何解決上述問題以獲得所需的功能？

Answer 1

我建議使用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>