網速換算器] 網速傻傻分不清楚Mbps? Mb/s? 來寫個單位換算器吧

Mbps 是用來計算網路頻寬最常見的單位，自從大家升級到4G 的行動網路後，如果你不是使用吃到飽的使用者，勢必會看到「降速」或「限速」這兩個詞，可是你有想過最常見的 ... 第11屆iThome鐵人賽 DAY 9 8 ModernWeb 從Hooks開始，讓你的網頁React起來系列第 9篇 [Day09-網速換算器]網速傻傻分不清楚Mbps?Mb/s?來寫個單位換算器吧 11th鐵人賽 react reactjs react-hooks pjchender 團隊WowDoge! 2019-09-2519:35:41101842瀏覽 感謝iT邦幫忙與博碩文化，本系列文章已出版成書「從Hooks開始，讓你的網頁React起來」，首刷版稅將全額贊助iT邦幫忙鐵人賽，歡迎前往購書，鼓勵筆者撰寫更多優質文章。

看了好多天的計數器，今天將讓我們換個主題吧！在開始之前，先來討論一下什麼是網速吧！ Mbps是用來計算網路頻寬最常見的單位，自從大家升級到4G的行動網路後，如果你不是使用吃到飽的使用者，勢必會看到「降速」或「限速」這兩個詞，可是你有想過最常見的降速20Mbps、或者限速5Mbps是什麼意思嗎？ 但因為最常接觸到的單位常常是MB，因為這常用在傳輸檔案或儲存空間上。

因此有些不太清楚的店員可能會跟你說20Mbps就是每秒鐘有20MB的網路傳輸速度，但真的是這樣嗎？錯！20Mbps完全不等於每秒鐘有20MB的網路傳輸量。

又或者你現在想要追一下最近很紅的「俗女養成記」，怕網速太慢影響看劇的興致，於是打開Netflix提供的測速網站Fast.com想要測一下網速： 測完發現有300Mbps，可是你有想過，這個300Mbps是什麼意思嗎？這絕對不是表示每秒鐘有300MB的網路頻寬。

Mbps和MB/s雖然不同，但這兩個單位之間是可以轉換的。

那麼多少Mbps才會等於1MB/s呢？ 在後面幾天，就讓我們來做一個網速單位換算器吧！ Mbps?或MB/s? 要做網速單位換算器之前，我們要先來了解Mbps到底是什麼意思，它又要怎麼轉換成MB/s。

實際上Mbps中的第一個M是英文的million，也就是「百萬」；小寫b是bit的意思，中文稱作「位元」；後面的ps則是persecond的意思，也就是「每秒」。

綜合起來，Mbps指的是「每秒鐘可以傳輸多少百萬位元（Millionbitspersecond）」。

那MB/s呢？這裡第一個M一樣式million百萬的意思；但B則是大寫的B，大寫的B和小寫的b在意思上是完全不同的，大寫B是指Byte，中文稱作「位元組」。

一個位元組（Byte）需要由8個位元（bit）所組成的。

所以實際上Mbps的值需要「除以8」後才會是指每秒鐘可以有多少MB的傳輸量。

小寫b和大寫B是不同的，小寫b指的是「位元（bit）」，大寫B指的是「位元組（Byte）」，一個位元組是由8個位元組成，所以Mbps的值需要「除以8」之後才會是指每秒鐘有多少MB的傳輸量。

也就是說至少要到8Mbps以上，才表示你的網路速度每秒鐘可以傳輸1MB以上： 來實作單位轉換器UI吧 今天就先讓我們來完成UI的部分吧，這主要是參考Rizky在dribbble的設計。

CSS部分 因為HTML和CSS並不是我們主要著墨的內容，所以CSS的部分版哥都已經幫你完成好了！請你打開CodePen的Day9-NetworkSpeedConverterwithonlyCSS，然後按下Fork。

在這個CodePen中，除了之前就有使用過的React套件之外，這裡還載入了FontAwesome這個套件，FontAwesome提供了非常多的圖示可以使用，它有分免費版和付費版，在非常多網站上都可以看到它的蹤影： HTML部分 HTML的部分，最外層的結構長這樣子： card-header和card-footer的部分最單純，放個標題就可以，分別對應到卡片的上面和下面： NetworkSpeedConverter FAST 比較複雜的是card-body裡面的部分，這裡一樣把它切成上下兩個部分，分別是unit-control和converter： unit-control和converter的部分，裡面則都分別切分成左、中、右三個區塊。

unit-control的部份： Mbps Mb/s converter的部分： Set Show 完成後完整的程式碼可以到Day9-NetworkSpeedConverterwithHTMLandCSS檢視： 將畫面改成JSX 在上面版哥的程式範例中，仍然是使用HTML和CSS，為了熟悉之後的實作，今天要做的事情很簡單，就要請你把上面的UI改成透過已經學習過的JSX來完成就好了，如此你將更熟悉這個樣板的HTML結構，和JSX的使用。

以下幾點是之前我們學過，而在切換成JSX過程中需要留意的： 把HTML中的class屬性改成className 當標籤內沒有內容時，可以讓該元素自行關閉（self-closing） 一個JSX最多只能有一個外層元素 完成後的程式碼可以參考Day9-NetworkSpeedConverter-StartedTemplate@CodePen。

明天我們在用這個樣版繼續做延伸說明。

重要補充：一個JSX元素只能有一個最外層元素 在先前使用JSX的過程中，我們經常提到「一個JSX元素只能有一個最外層元素」。

這是什麼意思呢？以下面的例子來說，在Counter這個組件的JSX中，只有一個根節點，就是最外層的...： constCounter=()=>( ); 錯誤作法 但若我們在這個JSX元素中，放入另一個節點...的話，是不被允許的： //❌這是不被允許的 constCounter=()=>( ); 你會在CodePen編輯器的右下方看到一個「驚嘆號」，表示程式本身有錯誤： 點下去這個驚嘆號，它會顯示詳細的錯誤內容： 正確做法一：外層的包一個HTMLTag 如果需要的話，外層可以多包一個HTML標籤，例如

); 這時候畫面就可以正確顯示。

正確做法二：使用ReactFragment 但有些時候，你不希望自己的這些元素外層還要額外包一個HTML標籤時，React提供了一個的標籤讓你使用，寫起來會像這樣： constCounter=()=>( 256 ); 如此，就可以解決JSX外層元素只能有一個根節點的情況，同時當我們透過瀏覽器的console視窗來檢視時，原本的HTML元素外層不會再被多包一個

標籤（畫面左側#root裡面多了一個

）： 由於開發者大多很簡潔懶惰，能用簡短而清楚的方式來表達意思自然是最好不過的，因此，還可以縮寫成<>，蛤？你問我縮寫成什麼？就是<>，沒錯，你不需要再寫落落長的，只需要寫<>>，像這樣： //<>>是的縮寫 constCounter=()=>( <> 256

> ); 程式範例 Day9-NetworkSpeedConverterwithonlyCSS@CodePen Day9-NetworkSpeedConverterwithHTMLandCSS@CodePen Day9-NetworkSpeedConverter-StartedTemplate@CodePen 參考資源 ReactFragments@ReactDocs ExchangerlandingpagebyRizky@dribbble mbps和MB/s是怎麼換算的 mbps@百度 留言 追蹤 檢舉 上一篇 [Day08-計數器]一個不夠，給我一次來十個-JSX中迴圈的使用 下一篇 [Day10-網速換算器]換算起來吧-資料綁定與組件拆分 系列文 從Hooks開始，讓你的網頁React起來 共30篇 目錄 RSS系列文 訂閱系列文 326人訂閱 26 [Day26-即時天氣]切換顯示不同頁面-子層組件修改父層組件資料狀態的方式 27 [Day27-即時天氣]React中的表單處理（ControlledvsUncontrolled）以及useRef的使用 28 [Day28-即時天氣]保存與更新使用者設定的地區資訊-localStorage與useEffect的搭配使用 29 [Day29-即時天氣]寫網頁就是要炫耀啊，不然要幹麻？發布上GithubPages吧！ 30 [Day30-臺灣好天氣]發布上GithubPages不夠，還要變成手機App！還有那些重要但故意先不告訴你的內容 完整目錄 尚未有邦友留言 立即登入留言 iT邦幫忙鐵人賽 參賽組數 1087組 團體組數 52組 累計文章數 20477篇 完賽人數 572人 鐵人賽最新文章 .NetCoreWebApi_筆記21_Swagger及OpenAPI介紹與配置使用方式_API管理與測試探討 .NetCoreWebApi_筆記20_api結合ADO.NET資料庫操作part8_新聞文章查詢 .NetCoreWebApi_筆記19_api結合ADO.NET資料庫操作part7_新聞文章的編輯更新與刪除 .NetCoreWebApi_筆記18_api結合ADO.NET資料庫操作part6_新聞文章表格陳列查詢 .NetCoreWebApi_筆記17_api結合ADO.NET資料庫操作part5_新聞文章新增_新聞類別元素透過API綁定方式 [Bonus系列]-使用useCallback&useMemo的正確時機是什麼? 大盤到底能不能攻上一萬八?? gotodie？那個goto到底能不能用啊？ 2021/12/12更新 予焦啦！一夢終須醒...... 前往鐵人賽 技術推廣專區 [Day2]抓取每日收盤價 [Day1]基本工具安裝 利用python取得永豐銀行API的Nonce [Day03]tinyML開發板介紹 永豐金融API測試員 [Day01]在享受tinyML這道美食之前 [Day3]使用ta-lib製作指標 [Day4]函數打包與買進持有報酬率試算 計算API所需要的參數:HashID 計算API所需要的參數:IV 前往鐵人賽 熱門問題 遠端監控電腦效能 列出85年度台北市的銷售員沒賣過的產品名稱(注意:同一個產品名稱只要顯示一次)，並依產品名稱排序。

web)前後端分離，前端如何拿到第三方api跳轉傳資料到後端的資料 使用ASP.NETWebForm快速開發是不是比較不會用[ASP.NET][C#]物件導向設計方式 程式有bug 這類的排隊是使用什麼方式 資料夾裡excel檔案全部轉檔 javascript耗時間的計算動作造成畫面阻塞的解決方式? Linux主機抓取Windows主機檔案 DefaultDomainPolicy密碼複雜度 IT邦幫忙 站方公告 【2021iThome鐵人賽】登登登！究竟獎落誰家，2021iThome鐵人賽得獎名單正式揭曉 熱門tag 看更多 13th鐵人賽 12th鐵人賽 11th鐵人賽 鐵人賽 2019鐵人賽 2018鐵人賽 javascript 2017鐵人賽 windows php python windowsserver linux c# 程式設計 資訊安全 css vue.js sql 分享 熱門回答 遠端監控電腦效能 web)前後端分離，前端如何拿到第三方api跳轉傳資料到後端的資料 使用ASP.NETWebForm快速開發是不是比較不會用[ASP.NET][C#]物件導向設計方式 Linux主機抓取Windows主機檔案 螢幕開關一關閉重開畫面顯示無訊號 程式有bug DefaultDomainPolicy密碼複雜度 sumif加總分頁的問題 磁區copy的工具 CrystalReport15碼長度字串使用code128在9*5.5cm紙張轉成一維條碼難以掃碼辯認問題 熱門文章 .NetCoreWebApi_筆記17_api結合ADO.NET資料庫操作part5_新聞文章新增_新聞類別元素透過API綁定方式 .NetCoreWebApi_筆記21_Swagger及OpenAPI介紹與配置使用方式_API管理與測試探討 .NetCoreWebApi_筆記19_api結合ADO.NET資料庫操作part7_新聞文章的編輯更新與刪除 第14隻狗勾 .NetCoreWebApi_筆記20_api結合ADO.NET資料庫操作part8_新聞文章查詢 第12隻狗勾 .NetCoreWebApi_筆記18_api結合ADO.NET資料庫操作part6_新聞文章表格陳列查詢 第13隻狗勾 鋼鐵人又要再次起飛了嗎? Python演算法學習日誌Day14 一週點數排行 更多點數排行 海綿寶寶(antijava) 居然解出來了(partyyaya) ㊣浩瀚星空㊣(yoching) ccenjor(ccenjor) 小山丘(a243318490) raytracy(raytracy) Gary(mosbbs) 純真的人(jer5173) Felix(redqi) Samuel(kuanyu) × At 輸入對方的帳號或暱稱 Loading 找不到結果。

標記 {{result.label}} {{result.account}} 關閉