padStart 的 polyfill

edgardeng 发布于2019-08-20 14:04 / 1923人阅读

摘要：原文链接欢迎今天在看新增的部分的时候刚好看到的这个方法，好像还挺实用的，而且也想在正式开始工作之前先找找写代码的感觉，于是顺手其实还是花了不少时间的就实现了这个。相关的用法在上有说明。，练手的目的算是达到了。

原文链接：欢迎 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，练手的目的算是达到了。

海外云主机服务器托管 padStart Polyfilling polyfill webrtc polyfill

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/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