padStart 的 polyfill

edgardeng 發(fā)布于2019-08-20 14:04 / 2185人閱讀

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

原文鏈接：歡迎 star.

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

相關(guān)的 API 用法在 MDN 上有說(shuō)明。鏈接下面是具體實(shí)現(xiàn)

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

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

// padStart  對(duì)于我來(lái)說(shuō)最常用的地方就在于時(shí)間或者數(shù)字格式補(bǔ)全了

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

ps:
寫完之后突然發(fā)現(xiàn)這個(gè)好像就是之前 npm 的 left-pad 刪庫(kù)事件；隱約記得好多人都重寫過(guò)這個(gè)庫(kù)。anyway，練手的目的算是達(dá)到了。

云服務(wù)器 GPU云服務(wù)器 padStart Polyfilling polyfill webrtc polyfill

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://www.ezyhdfw.cn/yun/81401.html

相關(guān)文章

ES6和Babel你不知道的事兒

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

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

摘要：距離上一篇走馬觀花已經(jīng)快兩年時(shí)間了，上個(gè)月底正式發(fā)布，再寫一篇姊妹篇，介紹新特性。會(huì)議的每一項(xiàng)決議必須大部分人贊同，并且沒有人強(qiáng)烈反對(duì)才可以通過(guò)。已經(jīng)準(zhǔn)備就緒，該特性會(huì)出現(xiàn)在年度發(fā)布的規(guī)范之中。距離上一篇《ES6 走馬觀花》已經(jīng)快兩年時(shí)間了，上個(gè)月底 ES8 正式發(fā)布，再寫一篇姊妹篇，介紹 ES8 新特性。什么是 ES8 ES8 是 ECMA-262 標(biāo)準(zhǔn)第 8 版的簡(jiǎn)稱，從 ES...

meislzhua 2019-08-20 18:04 評(píng)論0 收藏0
vue開發(fā)看這篇文章就夠了

摘要：注意此處獲取的數(shù)據(jù)是更新后的數(shù)據(jù)，但是獲取頁(yè)面中的元素是更新之前的鉤子函數(shù)說(shuō)明組件已經(jīng)更新，所以你現(xiàn)在可以執(zhí)行依賴于的操作。鉤子函數(shù)說(shuō)明實(shí)例銷毀 Vue -漸進(jìn)式JavaScript框架介紹 vue 中文網(wǎng) vue github Vue.js 是一套構(gòu)建用戶界面(UI)的漸進(jìn)式JavaScript框架庫(kù)和框架的區(qū)別我們所說(shuō)的前端框架與庫(kù)的區(qū)別？ Library 庫(kù)，本質(zhì)上是一...

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

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

mingde 2019-08-23 14:43 評(píng)論0 收藏0
2017-08-16 前端日?qǐng)?bào)

摘要：前端日?qǐng)?bào)精選理解的專題之偏函數(shù)譯理解事件驅(qū)動(dòng)機(jī)制游戲開發(fā)前端面試中的常見的算法問(wèn)題發(fā)布中文前端頁(yè)面?zhèn)鲄⑸袏y產(chǎn)品技術(shù)刊讀基礎(chǔ)系列二之實(shí)現(xiàn)大轉(zhuǎn)盤抽獎(jiǎng)掘金指南眾成翻譯編程插入排序眾成翻譯源碼講解函數(shù)技術(shù)風(fēng)暴初體驗(yàn)個(gè)人文 2017-08-16 前端日?qǐng)?bào) 精選理解 JavaScript 的 async/awaitJavaScript專題之偏函數(shù)[譯]理解 Node.js 事件驅(qū)動(dòng)機(jī)制Pokem...

graf 2019-08-22 10:54 評(píng)論0 收藏0