ES6新增padStart详细介绍

最新推荐文章于 2025-10-13 14:14:21 发布

转载最新推荐文章于 2025-10-13 14:14:21 发布 · 341 阅读

本文详细解析了JavaScript中String.prototype.padStart方法的功能与使用，包括如何通过填充字符串实现特定长度的格式化，以及不同参数组合下的具体行为表现。

概念

String.prototype.padStart方法用另一个字符串填充当前字符串(重复，如果需要的话)，以便产生的字符串达到给定的长度。填充从当前字符串的开始(左侧)应用的。

语法

❝
str.padStart(targetLength [, padString])
❞

参数

targetLength 当前字符串需要填充到的目标长度。如果这个数值小于当前字符串的长度，则返回当前字符串本身。
padString 可选填充字符串。如果字符串太长，使填充后的字符串长度超过了目标长度，则只保留最左侧的部分，其他部分会被截断。此参数的缺省值为空格。

返回值

result 在原字符串开头填充指定的填充字符串直到目标长度所形成的新字符串。

描述

目标长度小于等于字符串长度时，返回字符串本身。
目标长度大于字符串长度时，在字符串的的开头追加被填充字符串，被填充字符串从左向右截取 \1. 当无参数时，默认填充空格字符串；\2. 当填充空字符串时，返回字符串本身；\3. 当填充的字符长度小于补充位数时，被填充字符串从左到右重复；\4. 当填充的字符长度大于补充位数时，会从左到右截取被填充字符串。

例子

例一、格式化10位字符串，默认填充空格

'qdk'.padStart(10);
//  => '       qdk'

例二、格式化10位字符串，填充空字符串时，返回字符串本身

'qdk'.padStart(10, '');
//  => 'qdk'

例三、格式化10位字符串，填充qdk字符串，填充字符串不满足格式化位数时，填充字符串会从左到右重复

'qdk'.padStart(10, 'qdk');
//  => 'qdkqdkqqdk'

例四、格式化10位字符串，填充qianduanka字符串，当填充字符串超过剩余位数时，会从左到右截取填充字符串

'qdk'.padStart(10, 'qianduanka');
//  => 'qianduaqdk'

例五、格式化1位字符串时，小于字符串本身长度，返回字符串本身

'qdk'.padStart(1);
//  => 'qdk'

例六、格式化1位字符串时，小于字符串本身长度，返回字符串本身，填充字符串设置无效

'qdk'.padStart(1, 'qianduanka');
//  => 'qdk'

当填充的类型为非字符串时，会将其他来类型转换成字符串类型，在执行填充操作。

例七、格式化10位字符串时，将布尔类型转换字符串类型

'qdk'.padStart(10, true);
//  => 'truetruqdk'

例八、格式化10位字符串时，将数值类型转换字符串类型

'qdk'.padStart(10, 1234567890);
//  => 1234567qdk

例九、格式化10位字符串时，将大整数类型转换字符串类型

'qdk'.padStart(10, BigInt(10));
//  => '1010101qdk'

例十、格式化10位字符串时，将对象Object转换字符串类型

'qdk'.padStart(10, {});
//  => '[objectqdk'

例十一、格式化10位字符串时，将数组Array转换字符串类型

'qdk'.padStart(10, []);
//  => 'qdk'

面试题

一、请写出下面的结果？

'5'.padStart(2, '0');  // => ???
'qdk'.padStart(3, '0');  // => ???
'qdk'.padStart(10, 'a');  // => ???
'qdk'.padStart();  // => ???
'qdk'.padStart(10, Array.from(10));  //  => ???

Polyfill

if (!String.prototype.padStart) {
    String.prototype.padStart = function padStart(targetLength,padString) {
       targetLength = targetLength>>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);
            }
            return padString.slice(0,targetLength) + String(this);
        }
    };
}