padStart 的 polyfill

edgardeng 發布于2019-08-20 14:04 / 2100人閱讀

摘要：原文鏈接歡迎今天在看新增的部分的時候剛好看到的這個方法，好像還挺實用的，而且也想在正式開始工作之前先找找寫代碼的感覺，于是順手其實還是花了不少時間的就實現了這個。相關的用法在上有說明。，練手的目的算是達到了。

原文鏈接：歡迎 star.

今天在看 ES7 新增的部分 Api 的時候剛好看到 padStart 的這個方法，好像還挺實用的，而且也想在正式開始工作之前先找找寫代碼的感覺，于是順手（其實還是花了不少時間的）就實現了這個 polyfill。

相關的 API 用法在 MDN 上有說明。鏈接下面是具體實現

if(!String.prototype.padStart)
    String.prototype.padStart = 
       // 為了方便表示這里 fillString 用了ES6 的默認參數，不影響理解
        function (maxLength, fillString=" ") {
            if(Object.prototype.toString.call(fillString) !== "[object String]") throw new TypeError("fillString must be String")
            let str = this
            // 返回 String(str) 這里是為了使返回的值是字符串字面量，在控制臺中更符合直覺
            if(str.length >= maxLength) return String(str)

            let fillLength = maxLength - str.length, 
                 times = Math.ceil(fillLength / fillString.length)
           
           // 這個算法叫啥？
           // SICP 的中文版第 30頁 有用到同種算法計算乘冪計算
            while(times >>= 1) { 
                fillString += fillString
                    if(times === 1){
                       fillString += fillString
                    }     
            }
            return fillString.slice(0, fillLength) + str  
        }

// padStart  對于我來說最常用的地方就在于時間或者數字格式補全了

"5".padStart(2, "0") // "05"
"15".padStart(2, "0") // "15"

ps:
寫完之后突然發現這個好像就是之前 npm 的 left-pad 刪庫事件；隱約記得好多人都重寫過這個庫。anyway，練手的目的算是達到了。

GPU云服務器云服務器 padStart Polyfilling polyfill webrtc polyfill

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/81401.html

ES6和Babel你不知道的事兒

摘要：版本截圖當然，搜狗瀏覽器市場份額也不低，官方最新版本是，內核版本是，為之一驚。上面代碼的和分別是什么含義呢如果是下面的配置有何不可呢首先來明確一個概念是一系列的集合。比如做移動端開發不需要考慮之類的端產品線只考慮指定的瀏覽器等。因babel的版本從5升級到6有很多改動，比如babel本身不再提供任何transform的工作，都需要借助插件來完成，本文的所有討論都是建立在babel 6...

nidaye 2019-08-21 17:57 評論0 收藏0
ES8 走馬觀花（ECMAScript2017 新特性）

摘要：距離上一篇走馬觀花已經快兩年時間了，上個月底正式發布，再寫一篇姊妹篇，介紹新特性。會議的每一項決議必須大部分人贊同，并且沒有人強烈反對才可以通過。已經準備就緒，該特性會出現在年度發布的規范之中。距離上一篇《ES6 走馬觀花》已經快兩年時間了，上個月底 ES8 正式發布，再寫一篇姊妹篇，介紹 ES8 新特性。什么是 ES8 ES8 是 ECMA-262 標準第 8 版的簡稱，從 ES...

meislzhua 2019-08-20 18:04 評論0 收藏0
vue開發看這篇文章就夠了

摘要：注意此處獲取的數據是更新后的數據，但是獲取頁面中的元素是更新之前的鉤子函數說明組件已經更新，所以你現在可以執行依賴于的操作。鉤子函數說明實例銷毀 Vue -漸進式JavaScript框架介紹 vue 中文網 vue github Vue.js 是一套構建用戶界面(UI)的漸進式JavaScript框架庫和框架的區別我們所說的前端框架與庫的區別？ Library 庫，本質上是一...

fsmStudy 2019-08-21 18:37 評論0 收藏0
webpack4系列教程（七）：使用 babel-loader

摘要：然而，瀏覽器對這些高級語法的支持性并不是非常好。是一個編譯器，能夠讓我們放心的使用新一代語法。在中使用安裝修改，加入新的遇到文件就先用處理，表示排除文件夾中的文件。 1. 什么是Babel 如今 ES6 語法在開發中已經非常普及，甚至也有許多開發人員用上了 ES7 或 ES8 語法。然而，瀏覽器對這些高級語法的支持性并不是非常好。因此為了讓我們的新語法能在瀏覽器中都能順利運行，Babe...

mingde 2019-08-23 14:43 評論0 收藏0
2017-08-16 前端日報

摘要：前端日報精選理解的專題之偏函數譯理解事件驅動機制游戲開發前端面試中的常見的算法問題發布中文前端頁面傳參尚妝產品技術刊讀基礎系列二之實現大轉盤抽獎掘金指南眾成翻譯編程插入排序眾成翻譯源碼講解函數技術風暴初體驗個人文 2017-08-16 前端日報精選理解 JavaScript 的 async/awaitJavaScript專題之偏函數[譯]理解 Node.js 事件驅動機制Pokem...

graf 2019-08-22 10:54 評論0 收藏0