JS新规范padStart()详解，自己实现一个简单的padStart()

偏执的太偏执、 2023-07-08 02:52 4阅读 0赞

# 目录 #

## padStart() ##

## 性能优化方案 ##

--------------------

# padStart() #

标准内置对象：String.Prototype.padStart()

ES2017 引入了字符串补全长度的功能。如果某个字符串不够指定长度，会在头部或尾部补全。**padStart()** 用于头部补全，**padEnd()** 用于尾部补全。

下面主要写padStart()。

# 介绍 #

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

# 语法 #

> **str.padStart(targetLength \[, padString\])**

# 参数 #

## targetLength ##

当前字符串需要填充到的目标长度。如果这个数值小于当前字符串的长度，则返回当前字符串本身。

## padString 可选 ##

填充字符串。如果字符串太长，使填充后的字符串长度超过了目标长度，则只保留最左侧的部分，其他部分会被截断。此参数的缺省值为 " "（U+0020）。

# 返回值 #

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

# 用法 #

## 用法1 ##

**第二个参数（填充字符转）缺省**  
默认给原字符串开头填充“ ”，也就是默认填充空格  
![在这里插入图片描述][2020022421435683.png]

## 使用2 ##

**目标长度小于原字符串长度**  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTg0NDA0OQ_size_16_color_FFFFFF_t_70]

## 使用3 ##

字符串太长，使填充后的字符串长度超过了目标长度，则只保留最左侧的部分，其他部分会被截断。  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTg0NDA0OQ_size_16_color_FFFFFF_t_70 1]

## 使用4 正常使用 ##

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTg0NDA0OQ_size_16_color_FFFFFF_t_70 2]

# 性能优化方案 #

## 问题简介 ##

自己实现一个padStart()，实现给字符串‘hello’前补0，考虑性能。

测试方式：跑1w次，字符串拼接到长度1w。

## Mr Zhou的实现 ##

String.prototype.zpadStart = function (targetLength, padString) { 
        let string = this
        while (string.length < targetLength) { 
            string = padString + string
        }
        return string
    }

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTg0NDA0OQ_size_16_color_FFFFFF_t_70 3]

# 参考 #

*  padStart()方法,padEnd()方法\_Java\_歪脖先生的博客-CSDN博客 [https://blog.csdn.net/ixygj197875/article/details/79090578][https_blog.csdn.net_ixygj197875_article_details_79090578]

[2020022421435683.png]: https://img-blog.csdnimg.cn/2020022421435683.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTg0NDA0OQ_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/20200224215222390.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTg0NDA0OQ==,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTg0NDA0OQ_size_16_color_FFFFFF_t_70 1]: https://img-blog.csdnimg.cn/20200224215722696.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTg0NDA0OQ==,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTg0NDA0OQ_size_16_color_FFFFFF_t_70 2]: https://img-blog.csdnimg.cn/20200224215919703.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTg0NDA0OQ==,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTg0NDA0OQ_size_16_color_FFFFFF_t_70 3]: https://img-blog.csdnimg.cn/20200226104500101.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTg0NDA0OQ==,size_16,color_FFFFFF,t_70
[https_blog.csdn.net_ixygj197875_article_details_79090578]: https://blog.csdn.net/ixygj197875/article/details/79090578