一、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);
效果图:(他会自动跳时间)