使用 ECMAScript 2016 中的字符串填充-JavaScript中文网-JavaScript教程资源分享门户

在前端开发中，对字符串的处理是非常常见的。ECMAScript 2016 中引入的字符串填充方法可以让我们更加方便地处理字符串，本文将详细介绍如何使用字符串填充，并给出示例代码。

字符串填充简介

字符串填充是指在字符串的两端填充特定的字符，使其达到指定的长度。比如，我们想要将一个长度为 5 的字符串 "hello" 填充至 10 个字符的长度，可以在它的两端填充 5 个空格或者其他字符。ECMAScript 2016 中提供了 padStart 和 padEnd 两个方法来实现字符串填充。

padStart 和 padEnd 方法

padStart 和 padEnd 方法都接受两个参数，第一个参数是填充后的总长度，第二个参数是用于填充的字符。如果原字符串的长度小于总长度，则在两端填充字符；如果原字符串的长度大于等于总长度，则不做任何操作。

let str = 'hello';
let padStr = str.padStart(10, ' ');
console.log(padStr); // 输出 "     hello"

在上面的代码中，padStart 方法将字符串 "hello" 填充至长度为 10，用空格进行填充。输出结果是包含 5 个空格和 "hello" 的字符串。

let str = 'hello';
let padStr = str.padEnd(10, '*');
console.log(padStr); // 输出 "hello*****"

在上面的代码中，padEnd 方法将字符串 "hello" 填充至长度为 10，用星号进行填充。输出结果是 "hello" 和 5 个星号组成的字符串。

字符串填充的应用

字符串填充在前端开发中有很多应用，例如在表格中对齐数据或者生成指定长度的字符串。下面给出一个生成随机字符串的示例。

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

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

在上面的代码中，generateRandomStr 函数可以生成指定长度的随机字符串。在生成字符串后，padEnd 方法将它填充至长度为 10，用横线进行填充。输出结果类似 "y8IU0jKx-" 的字符串。该方法可用于生成随机订单号或者口令等。

总结

ECMAScript 2016 中的字符串填充方法是一种很实用的工具，在前端开发中有很多应用。本文介绍了字符串填充的基本用法和应用示例，希望对你的学习和工作有所帮助。

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