es6自动补全语法padStart padEnd+顺便实现时间的动态更新

一、es6 自动补全语法介绍

1.padStart
用来在指定的字符串前面补全指定字符。
用法实例:

   let str = "world";
       str.padStart(11, "hello "); //hello world

第一个参数11，表示你指定的补全后字符的长度，第二个参数表示需要用来补全的字符串。hello world 包含空格一共11个字符。

那如果指定的位数小于11呢？

 let str = "world";
        //str.padStart(11, "hello "); //hello world
        str.padStart(8, "hello "); //helworld

咱们指定位数为8，可以看到输出的是helworld，会自动删除指定字符串中超出的部分。

如果指定的参数大于11呢？

 let str = "world";
        //str.padStart(11, "hello "); //hello world
        //str.padStart(8, "hello "); //helworld
        str.padStart(15, "hello "); //hello hellworld

我们指定字符串长度为15，可以看到会重复拼接指定的字符串，直至满足指定的长度。

如果没有指定拼接的字符串，默认在前面拼接空格

let str = "world";
        //str.padStart(11, "hello "); //hello world
        str.padStart(8); //   world  注意前面有三个空格

如果指定的长度比原长度还小呢？

let str = "world";
    str.padStart(2,"!"); //   world

那么则显示原来的字符串，不会发生任何改变。
2.padEnd
和padStart不同的是，padEnd是拼接指定的字符串到结尾，用法和padStart一样。

let str = "world";
    str.padEnd(8,"!"); //   world!!!

前面几种情况 padEnd也适用。

注意：
这个参数必须是字符串形式，否则会报错。

二、实现时间的动态更新

里面用到了补全的语法，因为通过Date获取的时分秒，如果是各位数的话，不会显示前面的0，我们希望它显示出来，就要用到补全。

直接上代码：
html部分：

 <div id="time"></div>

css部分：（随便搞了个居中)

 #time {
                width: 30px;
                height: 30px;
                margin: 18px auto;
            }

js部分：(重头戏）

/* es自动补全实例方法: 字符串的方法
         * padStart()  补全字符串的开头
         * padEnd()  补全字符串的结尾
         */
        //使用场景1 : 补全个位数时间前面的0
        //存放数据对象
        let data = {
            hours: "", //时
            minutes: "", //分
            seconds: "", //秒
        };
        function getDate() {
            let date = new Date();
            data.seconds = date.getSeconds().toString();
            data.minutes = date.getMinutes().toString();
            data.hours = date.getHours().toString();
        }

        // console.log(hours instanceof String); //string instanceof String 一直返回false,string不属于任何一个类
        // console.log(typeof hours); //看下是否转为String

        /*
         * 时间补全函数
         * method: complete
         * param: str (String)
         */
        function complete(str) {
        	//用来判断传入的参数是否是字符串
            if (typeof str === "string") {
                return str < 10 ? str.padStart(2, "0") : str; //只有个位数的需要补0
            } else {
                console.error("complete函数参数填写错误!");
            }
        }

        /*展示时间函数*/
        const showTime = function () {
        	//这里每次调用都要保证获取当前的时间
            getDate();
            let timeDiv = document.getElementById("time");
            let time =
                complete(data.hours) +
                ":" +
                complete(data.minutes) +
                ":" +
                complete(data.seconds);
            //console.log(time);
            timeDiv.innerHTML = time;
        };
        /*定时器:动态展示时间
        *至于为什么不设置成1000ms是因为考虑到网速等各种原因
        *为了不让显示的时间卡顿
        */
        let timeIntv = self.setInterval(showTime, 900);

效果图：（他会自动跳时间）