本文为 《JavaScript 新书:探索 ES2016 与 ES2017》的内容章节,你可以点击链接查看完整目录。
概述: ECMAScript 2017 有两个新的字符串方法: JavaScript 代码: > 'x'.padStart(5, 'ab') // 'ababx' > 'x'.padEnd(5, 'ab') //'xabab' 为什么要填充字符串? 填充字符串的用例包括: 1)以等宽字体显示平整的数据。 2)在文件名或URL中添加计数或ID:’file 001.txt’。 3)对齐控制台输出: ‘Test 001: ?’。 4)打印具有固定位数的十六进制或二进制数字:’0x00FF’。 String.prototype.padStart(maxLength, fillString='') 该方法是在字符串前使用 fillString 填充,直到字符串长度为 maxLength : JavaScript 代码: > 'x'.padStart(5, 'ab') // 'ababx' 如果有需要,使用fillString的片段,以便使结果长度正好是 maxLength : JavaScript 代码: > 'x'.padStart(4, 'ab') // 'abax' 如果接收字符串的长度大于等于 maxLength ,则返回原始字符串: JavaScript 代码: > 'abcd'.padStart(2, '#') // 'abcd' 如果 maxLength 和 fillString.length 相同,则会截取 fillString 的前面部分,使返回字符串长度为 maxLength : JavaScript 代码: > 'abc'.padStart(10, '0123456789') // '0123456abc' 如果省略了 fillString ,则使用一个单独空格字符串(' ')代替: JavaScript 代码: > 'x'.padStart(3) // ' x' padStart() 的简单实现 以下实现可以大概了解 padStart() 是如何工作的,但并不完全符合规范(对于一些边缘情况)。 JavaScript 代码: String.prototype.padStart = function (maxLength, fillString=' ') { let str = String(this); if (str.length >= maxLength) { return str; } fillString = String(fillString); if (fillString.length === 0) { fillString = ' '; } let fillLen = maxLength - str.length; let timesToRepeat = Math.ceil(fillLen / fillString.length); let truncatedStringFiller = fillString .repeat(timesToRepeat) .slice(0, fillLen); return truncatedStringFiller + str; }; String.prototype.padEnd(maxLength, fillString=’ ‘) padEnd() 的工作方式与 padStart() 类似,但不是在字符串开始的地方插入重复的 fillString ,而是将其插入到字符串结束的地方: JavaScript 代码: > 'x'.padEnd(5, 'ab') // 'xabab' > 'x'.padEnd(4, 'ab') // 'xaba' > 'abcd'.padEnd(2, '#') // 'abcd' > 'abc'.padEnd(10, '0123456789') // 'abc0123456' > 'x'.padEnd(3) // 'x ' 与 padStart() 的实现相比,padEnd() 的实现只是最后一行是不同: JavaScript 代码: return str + truncatedStringFiller; 常见问题:padStart 和 padEnd 为什么这两个填充方法不叫做 padLeft 和 padRight ? 对于双向或从右到左的语言, left 和 right 这两个词显然容易混淆。因此,padStart 和 padEnd 的命名遵循了现有的 startsWith 和 endsWith 名称。 shim 为了兼容那些原生不支持 String.prototype.padStart 和 String.prototype.padEnd 方法的旧环境,你可以在 es-shims/String.prototype.padStart 和 es-shims/String.prototype.padEnd找到一些解决方案。 原文链接:http://exploringjs.com/es2016-es2017/ch_string-padding.html