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

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

         // Number(12).toString(); // '12'// Booleantrue.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); //falsehelloWorldlet str2 = 'helloWorld'.padStart(17,false);console.log(str2); //falsefahelloWorldlet 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); //03var month = String(new Date().getMonth()+1).padStart(2,'0');console.log(month);  //04

padEnd()

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

语法

string.padEnd(, )

maxLength 最终字符串的长度。

padString 表示填充字符串。

		let str1 = 'helloWorld'.padEnd(15, false);console.log(str1); //helloWorldfalselet str2 = 'helloWorld'.padEnd(17, false);console.log(str2); //helloWorldfalsefalet 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)); //     JavaScriptconsole.log('HTML'.padStart(15));       //           HTMLconsole.log('CSS'.padStart(15));        //            CSSconsole.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

本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！