ES6新增的padStart()方法和padEnd()方法

最新推荐文章于 2022-12-07 16:57:15 发布

「已注销」

最新推荐文章于 2022-12-07 16:57:15 发布

阅读量3.3k

点赞数

CC 4.0 BY-SA版权

分类专栏： JavaScript 文章标签： padStart()方法和padEnd()方法 javascript es6 字符串

本文链接：https://blog.csdn.net/qq_41702660/article/details/81916196

JavaScript 专栏收录该内容

43 篇文章

订阅专栏

本文详细介绍了JavaScript中padStart()与padEnd()方法的使用技巧，包括如何在字符串前后填充字符以达到指定长度，并提供了多种参数类型的填充示例。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

padStart()

用于在开头位置补全字符串

语法：

'abc'.padStart(10, '0123456789')
// '0123456abc'

参数：

接受两个参数：

第一个参数是用来指定字符串的长度，如果该值低于当前字符串的长度，则将按原样返回当前字符串

第二个参数是用来补全的字符串，如果此字符串太长而无法保持在目标长度内，则会截断该字符串并应用最左侧的部分，如果省略，将会用空格补全。

"abc".padStart(3,"a")    //abc

'abc'.padStart(10, '0123456789')    //"0123456abc"

'abc'.padStart(10)        // "       abc"

示例：

第二个参数可以传入任意类型的值。

如果传入的参数和原有的参数加起来还没有第一个参数的length大，那么空缺的位置将会用第二个参数来补全。

如果传入的参数是 [] 那么将会原样输出

如果传入的参数是 {} 那么浏览器会将 {} 解析成 [object Object] 来输出。

'abc'.padStart(8, false);    //"falseabc"

'abc'.padStart(8, null);        //"nullnabc"

'abc'.padStart(8, []);        //"abc"

'abc'.padStart(8, {});        //"[objeabc"

'abc'.padStart(15, false);    //"falsefalsefaabc"

padEnd()

和上面的基本都是一样的用法。

唯一不同的点是padStart()是从字符串的前面开始补全， padEnd()是从字符串的后面开始补全

'abc'.padEnd(8, false);        //"abcfalse"

'abc'.padEnd(8, null);        //"abcnulln"

'abc'.padEnd(8, []);           //"abc"

'abc'.padEnd(8, {});            //"abc[obje"

案例：

每次还要手动计算字符串的长度这样无疑是不好的方法，有解决方法看下面。

// 原本字符串
var str = "abc";
console.log(str.padStart(5,'0'))
//00abc


// 要填充的字符串
var padstr = "xxx";
console.log(str.padStart(padstr.length + str.length,padstr));
//xxxabc;