初学 ES6 反应慢？来学习 String 的用法和手写实现 padStart 和 padEnd

前言

ES6 （即 ECMAScript 6，也被称为 ES2015）是 JavaScript 语言的一个版本，于 2015 年 6 月正式发布，是标准中最重要的更新之一。如果你刚开始学习 ES6，可能会发现反应有点慢，不用担心，这很正常。

在此，我想借此机会分享一些关于 String 的用法以及手写实现 padStart 和 padEnd 的经验，希望这能够帮助你更好更快地掌握 ES6。

在 ES6 中使用 String

在 ES6 中，JavaScript 对字符串进行了重大的改进，提供了许多有用的新特性和方法。下面是一些常见的用法。

模板字面量

模板字面量是一种用来处理字符串的新语法。它可以在字符串里嵌入表达式，让代码更易读和可维护。想必大家都见过以下的代码吧：

const name = 'world';
console.log('hello ' + name + '!');
// 或者
console.log(`hello ${name}!`);

使用模板字面量可以让代码更简洁更易懂。

startsWith 和 endsWith 方法

startsWith 和 endsWith 可以用来判断字符串是否以某个子串开头或结尾，其用法如下：

const str = 'hello world';
console.log(str.startsWith('hello')); // true
console.log(str.endsWith('world')); // true

repeat 方法

repeat 方法可以用来重复一个字符串若干次，其用法如下：

console.log('hello '.repeat(3)); // 'hello hello hello '

includes 方法

includes 方法可以用来判断字符串是否包含某个子串，其用法如下：

const str = 'hello world';
console.log(str.includes('hello')); // true
console.log(str.includes('foo')); // false

String.raw 方法

String.raw 方法可以以原始形式输出字符串，其中的反斜杠符号不会进行转义。其用法如下：

console.log(String.raw`hello\nworld`); // 'hello\\nworld'

更多有用的 String 方法可以参考 MDN 文档。

手写实现 padStart 和 padEnd

在使用字符串时，我们有时候需要在其前面或后面填充一些字符，比如为数字填充 0 以达到一定的长度，或者为字符串添加一些空格以匹配一定的格式。ES6 提供了 padStart 和 padEnd 方法来实现这个功能。

padStart 和 padEnd 可以接受两个参数：要填充的字符串长度和要填充的字符。如果长度不足，会在原字符串前面或后面填入指定的字符使其达到指定的长度。

我们来看一下如何手写实现 padStart 和 padEnd。

padStart

function padStart (str, targetLength, padString) {
  if (str.length >= targetLength) {
    return str;
  }
  const len = targetLength - str.length;
  const pad = padString.length > len ? padString.substring(0, len) : padString;
  return pad + str;
}

接受三个参数，分别是需要填充的字符串、目标长度和填充字符。使用了 JavaScript 的字符串长度和子串截取操作。

padEnd

function padEnd (str, targetLength, padString) {
  if (str.length >= targetLength) {
    return str;
  }
  const len = targetLength - str.length;
  const pad = padString.length > len ? padString.substring(0, len) : padString;
  return str + pad;
}

与 padStart 相似，也是接受三个参数，使用了字符串长度和子串截取操作。

示例代码

以下是使用手写实现的 padStart 和 padEnd 的示例代码：

const str = '123';
console.log(padStart(str, 5, '0')); // '00123'
console.log(padEnd(str, 5, '0')); // '12300'
console.log(padStart(str, 2, '0')); // '123'
console.log(padEnd(str, 2, '0')); // '123'

总结

在本文中，我们简单介绍了几个常见的 String 用法以及如何通过手写实现 padStart 和 padEnd 来更深入地学习 ES6 的字符串操作。相信这些内容能够对你更好地掌握 ES6 提供的新特性和方法有所帮助。

来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64a653b248841e98942ebe57