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代码如下：

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

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

总结

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

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