解锁 JavaScript 字符串补全魔法：padStart()与 padEnd()

在日常的 JavaScript 开发中，字符串的格式化处理是一个极为常见的任务。想象一下，你正在开发一个电商网站，需要展示商品的价格，价格通常需要统一格式，比如不足两位小数的要补零，像5元需要显示为5.00元；又或者在处理日期时，日期中的月份和日期如果是个位数，也希望前面补零，如2024年1月5日显示为2024-01-05这种标准格式。这些场景都涉及到对字符串长度的补全和格式化需求。在 ES2017 中，JavaScript 为我们提供了两个非常实用的方法来解决这类问题，它们就是String.prototype.padStart()和String.prototype.padEnd()方法。

二、padStart () 方法详解

（一）语法剖析

padStart()方法的语法结构为：str.padStart(targetLength [, padString])。其中，targetLength是必选参数，表示填充后字符串要达到的目标长度。padString是可选参数，代表用于填充的字符串，如果省略该参数，默认使用空格进行填充。例如，我们有一个字符串let str = '123'，若想让它的长度达到 7，并且用'0'来填充，就可以使用str.padStart(7, '0')。这里7就是targetLength，'0'就是padString。

（二）基础示例

来看几个简单的示例，以便更直观地理解padStart()方法的作用。

js 复制代码

let num = "5";

// 将num填充到长度为3，用'0'填充

let result1 = num.padStart(3, "0");

console.log(result1); // 005

上述代码中，'5'原本是一位数字，通过padStart(3, '0')操作后，在它的前面填充了两个'0'，最终输出'005'。

再比如：

js 复制代码

let str = "abc";

// 将str填充到长度为6，用'xyz'填充

let result2 = str.padStart(6, "xyz");

console.log(result2); // xyzabc

在这个例子里，'abc'的长度为 3，目标长度是 6，'xyz'作为填充字符串。由于'xyz'长度小于需要填充的长度（6 - 3 = 3），所以'xyz'会重复使用，最终输出'xyzabc'。

（三）特殊情况说明

当填充字符串padString的长度大于目标长度targetLength时，padString只会截取其前缀部分来满足目标长度。例如：

js 复制代码

let str = "abc";

// 用'123456789'填充str到长度为6

let result3 = str.padStart(6, "123456789");

console.log(result3); // 123abc

这里'123456789'长度远大于目标长度 6，最终只会截取'123'来填充，输出结果为'123abc'。

而当目标长度targetLength小于原字符串str的长度时，padStart()方法会直接返回原字符串，不会进行填充操作。比如：

js 复制代码

let longStr = "hello world";

// 目标长度为5，小于原字符串长度

let result4 = longStr.padStart(5, "0");

console.log(result4); // hello world

输出结果依旧是'hello world' ，因为原字符串长度已经超过了目标长度 5。

三、padEnd () 方法详解

（一）语法与 padStart () 的对比

padEnd()方法的语法为：str.padEnd(targetLength [, padString])，与padStart()方法类似，targetLength同样表示填充后字符串要达到的目标长度，padString也是可选的填充字符串，默认值为空格。但二者的填充方向截然不同，padEnd()是从字符串的末尾进行填充，而padStart()是从字符串的开头填充。例如，对于字符串'123'，若使用padEnd(5, '0')，会在'123'的末尾填充两个'0'，结果为'12300'；而使用padStart(5, '0')则是在开头填充，结果为'00123'。

（二）示例展示

来看几个padEnd()方法的示例。

js 复制代码

let num = "9";

// 将num填充到长度为4，用'0'填充

let result1 = num.padEnd(4, "0");

console.log(result1); // 9000

上述代码将数字字符串'9'填充到长度为 4，在其末尾填充了三个'0'，输出结果为'9000'。

再如：

js 复制代码

let str = "xyz";

// 将str填充到长度为7，用'abc'填充

let result2 = str.padEnd(7, "abc");

console.log(result2); // xyzabca

这里'xyz'长度为 3，目标长度是 7，需要填充 4 个字符。'abc'长度为 3，循环使用'abc'进行填充，最终输出'xyzabca'。

（三）应用场景独特性

padEnd()方法在很多场景中有着独特的应用。在制作表格展示数据时，为了使数据在列中右对齐，保证表格的整齐美观，可以使用padEnd()方法。假设我们有一个包含商品名称和价格的表格数据：

js 复制代码

let products = [
  { name: "苹果", price: 5 },

  { name: "香蕉", price: 3 },

  { name: "橙子", price: 8 },
];

function formatProductTable(products) {
  let maxNameLength = Math.max(
    ...products.map((product) => product.name.length)
  );

  for (let product of products) {
    let name = product.name.padEnd(maxNameLength + 2);

    let price = product.price.toString().padEnd(5, "0");

    console.log(name + price);
  }
}

formatProductTable(products);
// 苹果  50000
// 香蕉  30000
// 橙子  80000

上述代码中，先计算出商品名称的最大长度，然后对每个商品名称使用padEnd()方法，在其末尾填充空格，使其长度统一并加上额外的两个空格；对价格则使用padEnd(5, '0')，在价格字符串末尾填充'0'，使其总长度为 5 。这样输出的表格数据就能整齐地右对齐，提高了可读性。

四、实际应用案例

（一）日期格式化

在前端开发中，日期的格式化展示是非常常见的需求。比如在一个日程管理系统中，需要将日期以 "年 - 月 - 日" 的标准格式展示给用户。使用padStart()方法可以轻松实现这一功能。

js 复制代码

function formatDate(date) {
  const year = date.getFullYear();

  const month = String(date.getMonth() + 1).padStart(2, "0");

  const day = String(date.getDate()).padStart(2, "0");

  return `${year}-${month}-${day}`;
}

let today = new Date();

console.log(formatDate(today)); // 2025-10-13

上述代码中，date.getMonth()返回的月份是从 0 开始的，所以需要加 1 。然后使用padStart(2, '0')将月份和日期字符串填充为两位，如果原字符串不足两位，则在前面补'0'，最终得到如'2024-10-30'这样标准格式的日期字符串。

（二）价格显示

在电商网站中，商品价格的规范显示至关重要。通常情况下，价格需要精确到小数点后两位。通过padEnd()方法可以方便地补全价格的小数部分。

js 复制代码

function formatPrice(price) {
  let priceStr = price.toString();

  if (!priceStr.includes(".")) {
    priceStr += ".00";
  } else {
    let parts = priceStr.split(".");

    if (parts[1].length === 1) {
      parts[1] = parts[1].padEnd(2, "0");
    }

    priceStr = parts.join(".");
  }

  return priceStr;
}

let productPrice = 10;

console.log(formatPrice(productPrice)); // 10.00

productPrice = 15.5;

console.log(formatPrice(productPrice)); // 15.50

当价格是整数时，直接在后面加上.00；当价格小数部分只有一位时，使用padEnd(2, '0')在小数部分末尾补零，确保价格始终以两位小数的形式展示，如'10.00'和'15.50'。

（三）敏感信息处理

在处理用户的敏感信息时，如身份证号、银行卡号，为了保护用户隐私，需要对部分信息进行隐藏。以身份证号为例，通常只显示前几位和后几位，中间部分用特定字符填充。

js 复制代码

function hideIDCard(idCard) {
  let start = 6;

  let end = 14;

  let maskedPart = "*".repeat(end - start);

  return (
    idCard.slice(0, start) + maskedPart + idCard.slice(-idCard.length + end)
  );
}

let id = "123456789012345678";

console.log(hideIDCard(id)); // 123456********5678

上述代码中，先确定需要隐藏的起始和结束位置，然后使用'*'.repeat(end - start)生成指定长度的'*'字符串作为掩码，最后通过字符串拼接，实现身份证号中间部分的隐藏。对于银行卡号，也可以采用类似的方式，比如常见的银行卡号隐藏中间几位的做法：

js 复制代码

function hideBankCard(bankCard) {
  return bankCard.replace(/(d{4})d+(d{4})/, "$1****$2");
}

let card = "1234567890123456";

console.log(hideBankCard(card));

这里使用正则表达式，将银行卡号中间部分替换为'****'，只保留前后各四位数字，有效保护了用户银行卡号的隐私安全。

五、兼容性及替代方案

（一）兼容性情况

padStart()和padEnd()是 ES2017 引入的新方法，在现代浏览器如 Chrome、Firefox、Safari（从一定版本开始）中都得到了良好的支持。然而，在一些旧版本浏览器，特别是 IE 浏览器中，并不支持这两个方法。根据 Can I Use 网站的数据统计，IE 浏览器全版本都不支持padStart()和padEnd() 。这意味着，如果你的项目需要兼容旧版本浏览器，在使用这两个方法时就需要特别注意。例如，在一些企业内部系统，由于部分员工还在使用旧版本 IE 浏览器办公，若直接使用padStart()和padEnd()方法，可能会导致页面出现兼容性问题，如字符串格式化错误，影响业务正常运行。

（二）不兼容时的替代实现

当在不支持padStart()和padEnd()方法的环境中，我们可以通过自定义函数来实现类似的功能。下面是一个模拟padStart()方法的自定义实现：

js 复制代码

if (!String.prototype.padStart) {
  String.prototype.padStart = function (targetLength, padString = " ") {
    let str = this.toString();

    while (str.length < targetLength) {
      str = padString + str;
    }

    return str;
  };
}

// 使用示例

let num = "5";

let result = num.padStart(3, "0");

console.log(result); // 005

上述代码中，首先检查String.prototype上是否存在padStart方法，如果不存在，则定义一个新的padStart方法。该方法通过循环，在原字符串前不断拼接填充字符串padString，直到字符串长度达到目标长度targetLength。

同样，对于padEnd()方法，也可以实现类似的替代函数：

js 复制代码

if (!String.prototype.padEnd) {
  String.prototype.padEnd = function (targetLength, padString = " ") {
    let str = this.toString();

    while (str.length < targetLength) {
      str = str + padString;
    }

    return str;
  };
}

// 使用示例

let num = "9";

let result = num.padEnd(4, "0");

console.log(result); // 9000

这里也是先判断padEnd方法是否存在，不存在则自定义。通过循环在原字符串末尾拼接填充字符串，以达到目标长度，从而在不支持原生padEnd()方法的环境中实现字符串末尾填充的功能。

六、总结与拓展

String.prototype.padStart()和String.prototype.padEnd()方法为 JavaScript 开发者在字符串格式化处理方面提供了极大的便利。通过这两个方法，我们能够轻松地实现字符串的长度补全，无论是在日期格式化、价格显示，还是敏感信息处理等场景中，都发挥着重要作用。

在实际开发中，当我们遇到需要统一字符串格式、对齐数据展示等需求时，不妨优先考虑这两个方法。同时，由于它们存在兼容性问题，在需要兼容旧浏览器的项目中，记得提前准备好替代方案。字符串处理是 JavaScript 开发中的基础且重要的部分，除了padStart()和padEnd()方法外，还有许多其他实用的字符串处理技巧，如字符串的拼接、查找、替换等。建议大家在日常开发中不断积累和探索，提升自己对字符串处理的能力，写出更高效、更优雅的代码。如果在使用这两个方法的过程中遇到任何问题，或者有独特的应用场景，欢迎在评论区分享交流，让我们一起进步！