在前端开发中，JS 是必不可少的一部分。而随着技术的不断更新，新版本的 JavaScript 也不断推出，为我们的开发带来更多方便和强大的功能。本文将介绍如何使用 ES8 为 JavaScript 添加换行符。
ES8 的新特性
ES8（也称为 ECMAScript 2017）是 JavaScript 的最新版本，它自 2017 年 6 月正式发布。ES8 中引入了一些新的特性，包括：
- async/await
- Object.entries() 和 Object.values()
- Shared Memory 和 Atomics
- Trailing Commas in function parameter lists 和 calls
- String padding
- 增强的正则表达式功能
- Promise.prototype.finally()
我们将专注于 ES8 中引入的一种新特性：String padding。
String padding
在过去，如果你想要在 JavaScript 中添加换行符，你可能需要使用 \n 或 \r\n 字符串转义序列。但是，这些字符串转义序列并不直观或易用。因此，ES8 中引入的 String padding 特性可以让我们更容易地向字符串中添加新行。
String.prototype.padStart() 和 String.prototype.padEnd()
ES8 引入了两种新的字符串方法：String.prototype.padStart() 和 String.prototype.padEnd()。这两个方法都是用来向字符串前（或后）填充空格的。
String.prototype.padStart() 方法会向数组的开头添加空格以达到制定的长度。
示例代码：
const string = 'hello'; console.log(string.padStart(10, ' ')); // output: ' hello'
在上面的代码中，hello 字符串前添加了 5 个空格，使它的总长度达到 10。
同时，String.prototype.padEnd() 方法会向数组的结尾添加空格以达到指定的长度。
示例代码：
const string = 'hello'; console.log(string.padEnd(10, ' ')); // output: 'hello '
在上面的代码中，hello 字符串后添加了 5 个空格，使它的总长度也达到了 10。
应用场景
应用场景可能有很多。在实际的开发场景中，有很多时候我们需要在字符串中使用以 '\n' 或 '\r\n' 为分隔符的多行字符串。在未使用 String padding 方法之前，我们可能使用如下方式来实现：
const multiLineStr = 'line1\nline2\nline3' console.log(multiLineStr) // output: // line1 // line2 // line3
使用 ES8 中的 String padding 方法我们可以这样实现：
const multiLineStr = 'line1'.padEnd(12)+'\n' + 'line2'.padEnd(12)+'\n' + 'line3'.padEnd(12); console.log(multiLineStr) // output: // line1 // line2 // line3
值得一提的是，这也可以用 JavaScript 的新语法（标签模板）更优雅地实现：
// javascriptcn.com 代码示例
function padEnd(strings, ...values) {
return strings.reduce((acc, str, i) => acc + str + (values[i] || '').padEnd(12), '')
}
const multiLineStr = padEnd`line1\nline2\nline3`;
console.log(multiLineStr)
// output:
// line1
// line2
// line3 指导意义
本文介绍了 ES8 的新特性 String padding，来帮助我们更方便、更容易地向 JavaScript 字符串添加新行。在实际的开发中，我们可以使用这种方法来实现多行字符串，并在代码中提高可读性。
总结
在本文中，我们简要介绍了 ES8 的新特性 String padding。我们了解了什么是 String padding，以及它如何帮助我们更方便、更容易地向 JavaScript 字符串添加新行。我们还讨论了一些实际应用场景，并提供了示例代码进行演示。希望本文能对您在开发和学习 JavaScript 中有所帮助。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/6544865f7d4982a6ebe5f3a2