首页 >> js开发 >> jsJS字符串补全方法padStart()和padEnd()js大全
jsJS字符串补全方法padStart()和padEnd()js大全
发布时间: 2021年1月13日 | 浏览:
| 分类:js开发
这个方法无意中看到的，感觉还是蛮实用的，特此分享一波。我想大家都会有遇到将时间戳转换成时间格式的时候，时间或日期不足2位的前面补0。有了今天说的这个东西，就又可以少写几行代码了，大家在项目中遇到类似场景可以去使用感受下。ES2021 引入了字符串补全长度的功能。如果某个字符串不够指定长度，会在头部或尾部补全。padStart() padEnd() 方法用另一个字符串填充当前字符串(如果需要的话则重复填充)，返回填充后达到指定长度的字符串。
padStart() 从当前字符串的开始(左侧) 位置填充。
padEnd() 从当前字符串的末尾（右侧）开始填充。语法：语法：
str.padStart(targetLength [, padString])
str.padEnd(targetLength [, padString])
str.padStart(targetLength [, padString])
str.padEnd(targetLength [, padString])padStart() 和 padEnd() 一共接受两个参数，第一个参数 targetLength 是当前字符串需要填充到的目标长度，第二个参数 padString 是用来填充的字符串，缺省值为" "。返回值：
返回值：在原字符串开头填充指定的填充字符串直到目标长度所形成的新字符串。如果 targetLength 小于当前字符串的长度，则字符串补全不生效，返回当前字符串本身。
'abc'.padStart(1, 'd');
// "abc"
'abc'.padEnd(1, 'd');
// "abc"
'abc'.padStart(1, 'd');
// "abc"
'abc'.padEnd(1, 'd');
// "abc"
如果 targetLength 小于用来填充的字符串长度与原字符串的长度之和，则截掉超出位数的补全字符串。
'abc'.padStart(6,"123456");
// "123abc"
'abc'.padEnd(6, "123456");
// "abc123"
'abc'.padStart(6,"123456");
// "123abc"
'abc'.padEnd(6, "123456");
// "abc123"
如果省略第二个参数 padString，即使用空格补全长度。
'abc'.padStart(10);
// "
abc"
'abc'.padEnd(10);
// "abc
"
'abc'.padStart(10);
// "
abc"
'abc'.padEnd(10);
// "abc
"
如果 padString 长度过长，则会删除后面多出的字符串。
'abc'.padStart(5, "foo");
// "foabc"
'abc'.padEnd(5, "foo");
// "abcfo"
'abc'.padStart(5, "foo");
// "foabc"
'abc'.padEnd(5, "foo");
// "abcfo"
应用：
补全指定位数，如格式化时间或日期时，个位数补0
提示字符串格式 字符串拼接
补全指定位数，如格式化时间或日期时，个位数补0提示字符串格式 字符串拼接示例：
当我们使用时间戳并转换成 yyyy-mm-dd hh:mm:ss 的格式。
function dataFormat(data) {
const dt = new Date(data * 1000) //注：如果是13位时间戳不用*1000
const y = dt.getFullYear()
const m = (dt.getMonth() + 1 + '').padStart(2, '0')
const d = (dt.getDay() + '').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}`
}
function dataFormat(data) {
const dt = new Date(data * 1000) //注：如果是13位时间戳不用*1000
const y = dt.getFullYear()
const m = (dt.getMonth() + 1 + '').padStart(2, '0')
const d = (dt.getDay() + '').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}`
}
因着此方法是ES6新增方法，部分浏览器不支持，会有兼容性问题。 查看 Polyfill 创建的String.prototype.padStart() / String.prototype.padEnd() 方法。查看 Polyfill
// https://github.com/uxitten/polyfill/blob/master/string.polyfill.js
// https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/padEnd
if (!String.prototype.padEnd) {
String.prototype.padEnd = function padEnd(targetLength,padString) {
targetLength = targetLength>>0; //floor if number or convert non-number to 0;
padString = String((typeof padString !== 'undefined' ? padString: ''));
if (this.length > targetLength) {
return String(this);
}
else {
targetLength = targetLength-this.length;
if (targetLength > padString.length) {
padString += padString.repeat(targetLength/padString.length); //append to original to ensure we are longer than needed
}
return String(this) + padString.slice(0,targetLength);
}
};
}
// https://github.com/uxitten/polyfill/blob/master/string.polyfill.js
// https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/padEnd
if (!String.prototype.padEnd) {
String.prototype.padEnd = function padEnd(targetLength,padString) {
targetLength = targetLength>>0; //floor if number or convert non-number to 0;
padString = String((typeof padString !== 'undefined' ? padString: ''));
if (this.length > targetLength) {
return String(this);
}
else {
targetLength = targetLength-this.length;
if (targetLength > padString.length) {
padString += padString.repeat(targetLength/padString.length); //append to original to ensure we are longer than needed
}
return String(this) + padString.slice(0,targetLength);
}
};
}
padStart() 从当前字符串的开始(左侧) 位置填充。
padEnd() 从当前字符串的末尾（右侧）开始填充。语法：语法：
str.padStart(targetLength [, padString])
str.padEnd(targetLength [, padString])
str.padStart(targetLength [, padString])
str.padEnd(targetLength [, padString])padStart() 和 padEnd() 一共接受两个参数，第一个参数 targetLength 是当前字符串需要填充到的目标长度，第二个参数 padString 是用来填充的字符串，缺省值为" "。返回值：
返回值：在原字符串开头填充指定的填充字符串直到目标长度所形成的新字符串。如果 targetLength 小于当前字符串的长度，则字符串补全不生效，返回当前字符串本身。
'abc'.padStart(1, 'd');
// "abc"
'abc'.padEnd(1, 'd');
// "abc"
'abc'.padStart(1, 'd');
// "abc"
'abc'.padEnd(1, 'd');
// "abc"
如果 targetLength 小于用来填充的字符串长度与原字符串的长度之和，则截掉超出位数的补全字符串。
'abc'.padStart(6,"123456");
// "123abc"
'abc'.padEnd(6, "123456");
// "abc123"
'abc'.padStart(6,"123456");
// "123abc"
'abc'.padEnd(6, "123456");
// "abc123"
如果省略第二个参数 padString，即使用空格补全长度。
'abc'.padStart(10);
// "
abc"
'abc'.padEnd(10);
// "abc
"
'abc'.padStart(10);
// "
abc"
'abc'.padEnd(10);
// "abc
"
如果 padString 长度过长，则会删除后面多出的字符串。
'abc'.padStart(5, "foo");
// "foabc"
'abc'.padEnd(5, "foo");
// "abcfo"
'abc'.padStart(5, "foo");
// "foabc"
'abc'.padEnd(5, "foo");
// "abcfo"
应用：
补全指定位数，如格式化时间或日期时，个位数补0
提示字符串格式 字符串拼接
补全指定位数，如格式化时间或日期时，个位数补0提示字符串格式 字符串拼接示例：
当我们使用时间戳并转换成 yyyy-mm-dd hh:mm:ss 的格式。
function dataFormat(data) {
const dt = new Date(data * 1000) //注：如果是13位时间戳不用*1000
const y = dt.getFullYear()
const m = (dt.getMonth() + 1 + '').padStart(2, '0')
const d = (dt.getDay() + '').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}`
}
function dataFormat(data) {
const dt = new Date(data * 1000) //注：如果是13位时间戳不用*1000
const y = dt.getFullYear()
const m = (dt.getMonth() + 1 + '').padStart(2, '0')
const d = (dt.getDay() + '').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}`
}
因着此方法是ES6新增方法，部分浏览器不支持，会有兼容性问题。 查看 Polyfill 创建的String.prototype.padStart() / String.prototype.padEnd() 方法。查看 Polyfill
// https://github.com/uxitten/polyfill/blob/master/string.polyfill.js
// https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/padEnd
if (!String.prototype.padEnd) {
String.prototype.padEnd = function padEnd(targetLength,padString) {
targetLength = targetLength>>0; //floor if number or convert non-number to 0;
padString = String((typeof padString !== 'undefined' ? padString: ''));
if (this.length > targetLength) {
return String(this);
}
else {
targetLength = targetLength-this.length;
if (targetLength > padString.length) {
padString += padString.repeat(targetLength/padString.length); //append to original to ensure we are longer than needed
}
return String(this) + padString.slice(0,targetLength);
}
};
}
// https://github.com/uxitten/polyfill/blob/master/string.polyfill.js
// https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/padEnd
if (!String.prototype.padEnd) {
String.prototype.padEnd = function padEnd(targetLength,padString) {
targetLength = targetLength>>0; //floor if number or convert non-number to 0;
padString = String((typeof padString !== 'undefined' ? padString: ''));
if (this.length > targetLength) {
return String(this);
}
else {
targetLength = targetLength-this.length;
if (targetLength > padString.length) {
padString += padString.repeat(targetLength/padString.length); //append to original to ensure we are longer than needed
}
return String(this) + padString.slice(0,targetLength);
}
};
}
相关文章:
- jsvuex中store存储store.commit和store.dispatch的用法js大全
- js解决Echarts 显示隐藏后宽度高度变小的问题js大全
- jsElement Breadcrumb 面包屑的使用方法js大全
- js解决vue动态路由异步加载import组件,加载不到module的问题js大全
- jsAngular利用HTTP POST下载流文件的步骤记录js大全
- js解决vuex数据页面刷新后初始化操作js大全
- jsvue 页面回退mounted函数不执行的解决方案js大全
- jsvue项目使用$router.go(-1)返回时刷新原来的界面操作js大全
- jsElement Input输入框的使用方法js大全
- js关于angular浏览器兼容性问题的解决方案js大全
刚刚发布热门点击发布时间
- [05/19]前端外包开发:git 舍弃本地代码强制从远程库更新
- [05/19]git 提交 忽略husky git 提交 忽略eslint 检测
- [05/18]前端外包工具:如何npm清理缓冲yarn,pnpm 清理缓存
- [05/18]前端开发工具:npm和pnpm有什么区别?pnpm安装
- [05/18]前端开发:npm与yarn的区别
- [07/09]Chrome抓取页面内容代码|chrome插件获取页面数据
- [07/09]谷歌浏览器数据采集插件开发|谷歌浏览器的采集功能
- [07/09]Chrome插件轻松抓取网络数据,Chrome插件轻松抓取网页源码数据
- [07/09]chrome插件怎么安装?chrome插件开发如何安装chrome插件
- [07/09]快速chrome插件开发-北京chrome插件开发外包
- [12/31]清大光德落地护眼灯|清大光德儿童护眼灯
- [07/20]网站无障碍适老化外包改造私有化过程遇到问题整理
- [07/19]适老化改造工信部明确APP适老化规范：禁广告弹窗，网站需提供特大字体
- [07/19]适老化改造包括哪些方面?
- [07/19]什么是适老化改造？
