前置填充方式一：String.prototype.padStart()

• 语法

  str.padStart(targetLength)
  str.padStart(targetLength, padString)

• 参数

  • targetLength：填充后的目标长度，如果该值小于str的长度，那么方法不会进行填充，而是直接返回当前str

  • padString（可选）：用于填充str的字符串，如果不传，默认是空格，另外，如果padString过长，则是会从开头截取进行填充

    "abc".padStart(10); // "       abc"
    "abc".padStart(10, "foo"); // "foofoofabc"
    "abc".padStart(6, "123465"); // "123abc"
    "abc".padStart(8, "0"); // "00000abc"
    "abc".padStart(1); // "abc"

前置填充方式二：自定义方法

function customPadStart(str, targetLength, padString) {
  // 将原字符串转换为字符串
  str = String(str);

  // 处理targetLength为有效的整数
  targetLength = Math.floor(Number(targetLength));
  if (isNaN(targetLength) || targetLength <= str.length) {
    return str;
  }

  // 处理padString，默认为空格，空字符串替换为空格
  if (padString === undefined) {
    padString = ' ';
  } else {
    padString = String(padString);
  }
  if (padString === '') {
    padString = ' ';
  }

  // 计算需要填充的长度
  const maxPadLength = targetLength - str.length;
  // 计算需要重复的次数并生成填充字符串
  const repeatTimes = Math.ceil(maxPadLength / padString.length);
  const paddedString = padString.repeat(repeatTimes).slice(0, maxPadLength);

  return paddedString + str;
}

后置填充方式一：String.prototype.padEnd()

• 语法

  str.padEnd(targetLength)
  str.padEnd(targetLength, padString)

• 参数

  • targetLength：填充后的目标长度，如果该值小于str的长度，那么方法不会进行填充，而是直接返回当前str

  • padString（可选）：用于填充str的字符串，如果不传，默认是空格，另外，如果padString过长，则是会从开头截取进行填充

    "abc".padEnd(10); // "abc       "
    "abc".padEnd(10, "foo"); // "abcfoofoof"
    "abc".padEnd(6, "123456"); // "abc123"
    "abc".padEnd(1); // "abc"

后置填充方式二：自定义方法

function customPadEnd(str, targetLength, padString) {
  // 将原字符串转换为字符串
  str = String(str);

  // 处理 targetLength 为有效的整数
  targetLength = Math.floor(Number(targetLength));
  if (isNaN(targetLength) || targetLength <= str.length) {
    return str;
  }

  // 处理 padString，默认为空格，空字符串替换为空格
  if (padString === undefined) {
    padString = ' ';
  } else {
    padString = String(padString);
  }
  if (padString === '') {
    padString = ' ';
  }

  // 计算需要填充的长度
  const maxPadLength = targetLength - str.length;
  // 计算需要重复的次数并生成填充字符串
  const repeatTimes = Math.ceil(maxPadLength / padString.length);
  const paddedString = padString.repeat(repeatTimes).slice(0, maxPadLength);

  // 将填充字符串添加到原字符串末尾
  return str + paddedString;
}

两种方式的对比

• padStart() 和 padEnd 方法是ES2017引入的，因此在较旧的浏览器中可能不支持