这个方法无意中看到的,感觉还是蛮实用的,特此分享一波。我想大家都会有遇到将时间戳转换成时间格式的时候,时间或日期不足2位的前面补0。有了今天说的这个东西,就又可以少写几行代码了,大家在项目中遇到类似场景可以去使用感受下。 ES2017 引入了字符串补全长度的功能。如果某个字符串不够指定长度,会在头部或尾部补全。 padStart() padEnd() 方法用另一个字符串填充当前字符串(如果需要的话则重复填充),返回填充后达到指定长度的字符串。 padStart() 从当前字符串的开始(左侧) 位置填充。 padEnd() 从当前字符串的末尾(右侧)开始填充。 语法: str.padStart 在JavaScript中,`padStart()` 和 `padEnd()` 是ES2017引入的两个非常实用的方法,它们用于字符串的长度补全。这两个方法的主要作用是确保字符串达到指定的长度,通过在字符串的开始(左侧)或结束(右侧)添加指定的字符来实现。 `padStart()` 方法从字符串的左侧开始填充,它接受两个参数: 1. `targetLength`:这是字符串需要达到的总长度。如果当前字符串的长度小于这个长度,那么`padStart()` 将在字符串的开始处填充第二个参数指定的字符串,直到达到`targetLength`。 2. `padString`:这是用来填充的字符串,默认值为空格 `' '`。如果`padString`的长度超过需要填充的长度,那么将只使用其中的一部分。 例如: ```javascript 'abc'.padStart(10); // " abc"(原字符串前填充3个空格) 'abc'.padStart(10, '123'); // "123abc"(原字符串前填充3个'123') ``` `padEnd()` 方法与`padStart()` 类似,不同之处在于填充发生在字符串的右侧。同样接受`targetLength` 和 `padString` 参数,但填充是从字符串的末尾开始。 例如: ```javascript 'abc'.padEnd(10); // "abc "(原字符串后填充3个空格) 'abc'.padEnd(10, '123'); // "abc123"(原字符串后填充3个'123') ``` 在实际应用中,这两个方法常用于格式化输出,如日期和时间的显示。例如,将时间戳转换为`yyyy-mm-dd hh:mm:ss`格式时,可以用`padStart()`来确保月份、日期、小时、分钟和秒始终是两位数: ```javascript function dataFormat(data) { const dt = new Date(data * 1000); const y = dt.getFullYear(); const m = (dt.getMonth() + 1 + '').padStart(2, '0'); const d = (dt.getDate() + '').padStart(2, '0'); const hh = (dt.getHours() + '').padStart(2, '0'); const mm = (dt.getMinutes() + '').padStart(2, '0'); const ss = (dt.getSeconds() + '').padStart(2, '0'); return `${y}-${m}-${d} ${hh}:${mm}:${ss}`; } ``` 由于`padStart()`和`padEnd()`是ES2017的特性,可能在一些较旧的浏览器中不受支持。为了确保兼容性,可以使用polyfill来添加这些方法。例如,可以在项目中引入[MDN提供的polyfill](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/padEnd)或者使用其他第三方库提供的解决方案。 总结一下,`padStart()` 和 `padEnd()` 是JavaScript中方便的字符串补全方法,它们提高了代码的简洁性和可读性,尤其在处理格式化输出时,可以避免繁琐的条件判断和手动填充。在使用这些方法时,注意考虑浏览器兼容性问题,并适当地提供polyfill。
- 粉丝: 5
- 资源: 922
- 我的内容管理 展开
- 我的资源 快来上传第一个资源
- 我的收益 登录查看自己的收益
- 我的积分 登录查看自己的积分
- 我的C币 登录后查看C币余额
- 我的收藏
- 我的下载
- 下载帮助