JS 字符串填充函数 padStart 与 padEnd 的用法

ES2017 为 String.prototype 添加了 padStart() 和 padEnd() 方法，这两个方法提供了向字符串填充空格或其他字符直到特定长度的功能。使用方式如下：

            let str = "hello"
            //填补空格 或 "."
            str.padStart(10, " ") // "     hello"
            str.padStart(10, ".") // ".....hello"
            str.padEnd(10, " ");  // "hello     "
            str.padEnd(10, ".");  // "hello....."
        

第二个参默认值为空格，所以padStart(10) 等同于 padStart(10, " ")。

有时候我们我们向控制台打印消息，格式是固定的，但显示的时候很混乱，如下所示：

            name: text, content: content
            name: long long text, content: long long content
            name: long text, content: long content
        

我们希望看起来整齐一些，如下所示：

            name: text              , content: content           
            name: long long text    , content: long long content 
            name: long text         , content: long content         
        

案例实现（仅限英文或数字，中文与字母宽度不一致，混入的话无法达到整齐的要求）：

            let msgs = [
                { name:"text", content:"content" },
                { name:"long long text", content:"long long content" },
                { name:"long text", content:"long content" }
            ];
            // 输出到控制台
            msgs.map(m => {
                let name = m.name.padEnd(18," ");//填补空格至18个字符
                let content = m.content.padEnd(18," ");//填补空格至18个字符
                console.log(`name: ${name}, content: ${content}`)
            })
        

结果将会输出上述整齐的字符串。

如果将 padEnd 替换为 padStart，文字看起来向右对齐，展示效果如下：

            name:               text, content:            content
            name:     long long text, content:  long long content
            name:          long text, content:       long content
        

毕竟是 ES2017 的规范，在 IE 或一些老的的浏览器其没有这个功能，可以使用 polyfill