JS中的trimStart() 、trimEnd()、padStart()和padEnd()方法

trimStart() 和 trimEnd()

分别用于删除字符串开头和末尾的空格

let s = '  foo  ';
console.log(s.trimStart());//foo  //
console.log(s.trimEnd()); //  foo

padStart()和padEnd()

padStart()和padEnd()用于补全字符串

padStart（）

padStart() 可以在字符串的开头进行字符补全。

语法：

string.padStart(<maxLength>, <padString>)

参数：

maxLength 最终字符串的长度

padString 表示用来补全长度的字符串，它接受一个string。如果我们试图给它传入其他数据类型。它会调用 toString方法强制转成一个字符串。

先来看一下不同类型的值转换成字符串的情况

         // Number
        (12).toString(); // '12'

        // Boolean
        true.toString(); // 'true'
        false.toString(); // 'false'

        // Array
        ['A'].toString(); // 'A'
        [''].toString(); // ''

        // Object
        ({}).toString(); // '[object Object]'

        ({
            hi: 'hi'
        }).toString(); // '[object Object]'

例子

        let str1 = 'helloWorld'.padStart(15,false);
        console.log(str1); //falsehelloWorld

        let str2 = 'helloWorld'.padStart(17,false);
        console.log(str2); //falsefahelloWorld

        let str3 = 'helloWorld'.padStart(15,[]);
        console.log(str3); //helloWorld 因为[]转换成字符串是空字符串

        let str4 = 'helloWorld'.padStart(15,{});
        console.log(str4); //[objehelloWorld  只显示了'[object Object]'前5个字符

从上面几个案例可以看出，如果补全字符串长度不足，则不断循环补全；如果长度超出，则从左侧开始依次补全，如果这个数值小于当前字符串的长度，则返回当前字符串本身。 此方法返回值是补全后的字符串。

案例

日期补0

        var day = String(new Date().getDate()).padStart(2,'0');
        console.log(day); //03
        var month = String(new Date().getMonth()+1).padStart(2,'0');
        console.log(month);  //04

padEnd()

padEnd()可以在字符串的后面进行字符补全，语法参数等都和 padStart()类似。

语法

string.padEnd(<maxLength>, <padString>)

maxLength 最终字符串的长度。

padString 表示填充字符串。

		let str1 = 'helloWorld'.padEnd(15, false);
        console.log(str1); //helloWorldfalse

        let str2 = 'helloWorld'.padEnd(17, false);
        console.log(str2); //helloWorldfalsefa

        let str3 = 'helloWorld'.padEnd(15, []);
        console.log(str3); //helloWorld 因为[]转换成字符串是空字符串

        let str4 = 'helloWorld'.padEnd(15, {});
        console.log(str4); //helloWorld[obje 只显示了'[object Object]'前5个字符

        let str5 = 'helloWorld'.padEnd(9, "dd");
        console.log(str5); //helloWorld

特殊的 undefined

如果你强制把 undefined 转成一个字符串，得到一个TypeError:

undefined.toString(); // TypeError: Cannot read property 'toString' of undefined

但当我们把undefined作为第二个参数传入padStart，会得到这个：

         let str6 = 'hello'.padStart(15, undefined);
        console.log(str6); //          hello

ECMAScript 规范 :如果填充的字符串是 undefined，该填充的字符串就会被规制成空格(0x0020)。

实战案例

使用 padStart 让字符串右对齐

        console.log('JavaScript'.padStart(15)); //     JavaScript
        console.log('HTML'.padStart(15));       //           HTML
        console.log('CSS'.padStart(15));        //            CSS
        console.log('Vue'.padStart(15))         //            Vue

数字打码

        const nums = '1111 1111 1111 1111';
        const lastnums = nums.slice(-4);
        let res = lastnums.padStart(nums.length,'*');
        console.log(res); //***************1111