ES7 的字符串填充方法（padStart 和 padEnd）详解-JavaScript中文网-JavaScript教程资源分享门户

在这个前端快速发展的时代，如何更加高效、简便地操作字符串是很多开发者关注的一个问题。因此，ES7推出了两种新的字符串填充方法 — padStart和padEnd，它们可以快速便捷地进行字符串填充，解决了日常开发中需要填充字符串的不便之处。

padStart和padEnd的使用方法

这两个方法都接受两个参数：填充后字符串的总长度和一个可选的填充字符串值。如果不传第二个参数，将默认用空格作为填充字符。它们的用法如下：

let str = 'hello';
let paddedStr = str.padStart(10, '-');
console.log(paddedStr); // '-----hello'

let str = 'world';
let paddedStr = str.padEnd(10, '-');
console.log(paddedStr); // 'world-----'

其中，padStart将字符串填充在字符的开始位置，而padEnd将字符串填充在字符的结束位置。

padStart和padEnd的深入分析

多次执行padStart/padEnd方法

padStart和padEnd都是不可变的，它们不会改变原始字符串的值，而是返回新的、已填充的字符串。多次使用这两个方法将得到不同的结果，具体表现如下：

let str1 = 'hello';
let paddedStr1 = str1.padStart(10, '-');
let paddedStr2 = paddedStr1.padStart(15, '*');
console.log(paddedStr1); // '-----hello'
console.log(paddedStr2); // '********---hello'

let str1 = 'world';
let paddedStr1 = str1.padEnd(10, '-');
let paddedStr2 = paddedStr1.padEnd(15, '*');
console.log(paddedStr1); // 'world-----'
console.log(paddedStr2); // 'world-----*******'

小数点位数填充示例

在一些业务开发场景中，我们会需要对数字进行小数点数位的填充，通过padStart方法来实现较为简单。例如我们需要将数字填充到6位，其中小数位数为2，那么我们可以通过以下代码来实现：

let num = 12.34;
let paddedNum = num.toFixed(2).padStart(6, '0');
console.log(paddedNum); // "0012.34"

padStart和padEnd的兼容性问题

padStart和padEnd方法是ES7规范引入的，因此在一些低版本的浏览器或者环境中是无法使用的。对于这类情况，我们可以通过在项目中使用polyfill来解决。padStart和padEnd方法对应的polyfill代码如下：

// javascriptcn.com 代码示例
if (!String.prototype.padStart) {
  String.prototype.padStart = function padStart(targetLength, padString) {
    targetLength = targetLength >> 0; //floor if number or convert non-number to 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); //append to original to ensure we are longer than needed
      }
      return padString.slice(0, targetLength) + String(this);
    }
  };
}

if (!String.prototype.padEnd) {
  String.prototype.padEnd = function padEnd(targetLength, padString) {
    targetLength = targetLength >> 0; //floor if number or convert non-number to 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); //append to original to ensure we are longer than needed
      }
      return String(this) + padString.slice(0, targetLength);
    }
  };
}

总结

padStart和padEnd方法为字符串的填充操作提供了很大的便利性，在日常开发中应用十分广泛。同时，需要注意的是这两个方法的兼容性问题，在适当的场景下使用polyfill可以解决问题。我希望本文对大家理解和应用这两种方法起到了一定的指导作用。

来源：JavaScript中文网，转载请注明来源本文地址：https://www.javascriptcn.com/post/6519791a95b1f8cacd1a1d0a